Understanding the CSS Formatting Model

The CSS formatting model covered here applies to both inline and block elements. Most often, however, you have to take it into consideration when formatting block elements, so I've chosen to deal with this subject at this point, rather than in an earlier chapter.

Every CSS element forms a “box” composed of the following components:

  • Content— This includes the actual content of the element, such as text, an image, and so on.

  • Padding— This includes any padding that has been set around the content by the padding-top, padding-bottom, padding-left, padding-right, or padding properties.

  • Border— This includes any border that has been set around the element's content and padding. Borders are set by the border-top

Get Cascading Style Sheets (CSS) by Example 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.