C H A P T E R 4
Box Models
The fundamental design pattern in CSS is the Box Model. The Box Model defines how elements are
rendered as boxes. There are six main types of boxes: inline, inline-block, block, table, absolute, and
floated. A browser renders each element as one of these boxes. Some elements are rendered in a
variation of one of these boxes, such as a list item or table cell. For example, list-item is a block box
with an inline marker automatically created by the browser, and table-cell is a block box that does not
support margins.
You can use the display property to render an element as a different type of box. You can use
position:absolute or position:fixed to render any element as an absolute box. You can use the
float:left or float:right rules to render any element as a floated box.
This is the first of three chapters on the Box Model. This chapter explains the six main types of
boxes. Chapter 5 introduces extents, which are controlled by width and height. Extents control whether
a box is shrinkwrapped to its content, sized, or stretched to the sides of its container. Chapter 6
introduces the Box Model properties: margin, border, padding, background, overflow, visibility, page-
break-before, and page-break-after. Background, visibility, and page breaks work the same in all boxes.
Borders, padding, and overflow work the same in all boxes except for inline. Width, height, and margins
work differently in each type of box.
Chapter Outline
- Display shows how to render an element as an inline box, a block box, an inline-
block box, a list-item box, a table box, or not at all. - Box Model introduces the general box model underlying all types of boxes.
- Inline Box shows how inline boxes work.
- Inline-Block Box shows how inline-block and replaced inline boxes work.
- Block Box shows how block boxes work.
- Table Box shows how table boxes work.
- Absolute Box shows how absolute and fixed boxes work.
- Floated Box shows how floated boxes work.