O'Reilly logo

Pro CSS and HTML Design Patterns by Michael Bowers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required