C H A P T E R 5
(^)
Box Model Extents
This is the second of three chapters on the Box Model. It shows how boxes can be sized, shrinkwrapped,
and stretched. The previous chapter discusses the six main types of boxes: inline, inline-block, block,
table, absolute, and floated. The next chapter discusses properties that style the box.
Each type of box works differently. The design patterns in this chapter show how to apply width and
height to each type of box to size, shrinkwrap, or stretch it. Horizontal and vertical dimensions are
independent. You can freely combine different vertical and horizontal design patterns. For example, you
can stretch horizontally and shrinkwrap vertically.Chapter Outline
- Width contrasts how width can size, shrinkwrap, or stretch each type of box.
- Height contrasts how height can size, shrinkwrap, or stretch each type of box.
- Sized shows how to set the height or width of an element. An element is sized
when you manually assign it a height and/or a width. For example, you can use
height:50% to size an element’s height to 50% of the height of its container. - Shrinkwrapped shows how to shrink the width or height of an element to the size
of its content. For example, height:auto causes the height of a static block
element to expand automatically to fit the total height of its lines, and width:auto
causes the width of an absolute element to shrink to fit to the width of its widest
line. - Stretched shows how to stretch the width or height of an element to the sides of
its container. For example, width:auto causes the width of a static block element
to expand automatically to fit the width of its container. For example, top:0,
bottom:0, and height:auto cause an absolute element to expand automatically to
fit the height of its container. A stretched element’s left side aligns to the left side
of its container, and its right side aligns to the right side of the container. Similarly,
its top and bottom sides align to the top and bottom sides of its container.