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 ...

Get Pro HTML5 and CSS3 Design Patterns now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.