CHAPTER 4 ■ BOX MODELSBox Model
Problem You want to style the box of an element.
Solution The Box Model design pattern is built into CSS. This model defines the relationship between
the following properties: display, width, height, padding, border, margin, background,
overflow, and visibility.
width normally sets the width of an element’s inner box.
height normally sets the height of an element’s inner box.
padding sets the size of the padding surrounding the inner box. The padding is transparent
to the element’s background.
border sets the size, pattern, and color of the border surrounding the padding.
margin sets the size of the margin surrounding the border. The margin is transparent to the
background of the element’s parent. The outside of the margin is the element’s outer box.
background assigns the padding area inside the box to a background color and/or image.
overflow determines what happens when an element’s content is larger than its inner box.
The default is to show the overflowing content.
visibility can make the element visible or hidden.
Pattern SELECTOR { display:CONSTANT;^
overflow:VALUE;
visibility:VALUE;
width:+VALUE;
height:+VALUE;
padding:+VALUE;
border:+WIDTH STYLE COLOR;
margin:±VALUE;
background:VALUES; }
Location This design pattern applies to all elements.
Example The example contains additional HTML markup and CSS rules that are not shown. This
extra code renders a label over each part of the box and draws the outer box and inner box
borders.
Notes CSS defines six main types of boxes: inline, inline-block, block, table, absolute, and floated.
The type of box is determined by the combination of the following properties: display,
position, and float. Box Model properties work differently and produce different layouts
depending on the type of box. Certain types of boxes have additional functionality provided
by additional properties, such as line-height, border-collapse, and table-layout.
Related to All Box Model design patterns^