CHAPTER 5 ■ BOX MODELS EXTENTSSized
Problem You want to set the height and/or width of an element to a measurement or a percentage of
its containing block’s height and width.
Solution Apply styles to your chosen class or ID as follows:
Use height to set the height of an element to a measurement or a percentage of the
height of its container.
Use width to set the width of an element to a measurement or a percentage of the width
of its container.
You can assign width and height independently. In other words, you can size the height
only, the width only, or both height and width.
If you do not want to size the height or width, you can set width or height to auto. auto
is the default value for width and height.
Pattern SELECTOR { width:+VALUE; height:+VALUE; }^
Location This pattern applies to all elements except for static inline elements.
Explanation Sized elements require width and height to be set to a measurement or percentage. A
percentage of 100% is used to stretch an element, but any other percentage sizes the
element smaller or larger than its container.
height and width specify the inner box of an element. Padding surrounds the inner box.
Borders surround the padding. Margins surround the borders. The box surrounding the
margins is the outer box. Padding, borders, and margin expand the outer box and have no
effect on the height and width of the inner box. Negative margins may cause adjacent
elements to overlap an element, but they do not change its height and width.
Tables are an exception where height and width specify the outside of the table’s border.
This causes borders and padding to be placed inside the specified height and width. This is
why the table in the example is smaller than the other elements.
When a float is sized, it changes the flow. width changes the left and right boundaries in
which the float’s content is flowed, affecting the location of adjacent content and floats.
height pushes down or pulls up adjacent floats.
When a static block element is sized, it changes the flow. height pushes down or pulls
up the following block element. height also shrinks or grows the height of its parent
(unless the parent is also sized). width changes the left and right boundaries in which
content is flowed.
When an absolute element is sized, it does not change the flow and it does not change
the position of other elements. Percentages in width and height refer to its closest
positioned ancestor’s width and height.
When sizing a replaced element, such as an image, the browser scales it to the specified
size. To use the intrinsic size, set height and width to auto.
Related to Width, Height, Shrinkwrapped, Stretched; Static, Absolute, Float (Chapter 7)