CHAPTER 4 ■ BOX MODELSBlock Box
Aliases Block, block element, and static block box are synonyms with block box.
Problem You want to style the box of a block element.
Solution Block boxes flow vertically from top to bottom in a block formatting context. This is called
the normal flow of blocks. Block boxes can contain other block boxes, or they can
terminate the block formatting context and start an inline formatting context containing
inline boxes. A terminal block creates an inline formatting context inside its inner box, but
occurs within a block formatting context on the outside of its outer box.
A block can be stretched to the width and height of its parent or sized smaller or larger than
its parent. When sized larger, it overflows its parent. The overflow property controls how
the browser handles overflow.
width sets the width of the element. width:auto is the default value and stretches the
element to fill the width of its parent.
height sets the height of the element. height:auto is the default value and shrinkwraps the
element to the height of all its child blocks or lines.
margin-left and margin-right indent or outdent the sides of a stretched block, and they
offset the sides of a sized block. You cannot horizontally shrinkwrap a block box.
margin-top and margin-bottom push blocks further apart with positive values, but negative
values bring them closer together, and can even overlap them. A browser collapses top and
bottom margins of neighboring blocks.
margin-left:auto and margin-right:auto control the horizontal alignment of a sized
block. When you size a block by setting width to a measurement, margin-right:auto aligns
the block to the left side of its parent, and margin-left:auto aligns the block to the right
side. When you set both margin-left and margin-right to auto, the block is aligned to the
center of its parent (as shown in the example).
border and padding expand the outer width and height of the box. This pushes down a
block and its following blocks. On stretched blocks, horizontal borders and padding shrink
the size of the inner box. On sized blocks, they offset the inner box.
Pattern SELECTOR { display:block; overflow:VALUE; visibility:VALUE;
width: +VALUE; height: +VALUE;
margin:±VALUE; padding:+VALUE;
border:+WIDTH STYLE COLOR;
background:VALUES; }
Location This design pattern applies to block elements.
Related to Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5);Margin,
Border, Padding, Background, Overflow, Visibility (Chapter 6)