CHAPTER 4Box 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 ble 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 the position:absolute or position:fixed to render any element as an absolute box. You can use the float:left or float:right ...

Get Pro CSS and HTML Design Patterns now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.