© Mikael Olsson 2019
Mikael OlssonCSS3 Quick Syntax Referencehttps://doi.org/10.1007/978-1-4842-4903-1_16

16. Box Model

Mikael Olsson1 
(1)
Hammarland, Finland
 
The so-called box model of CSS describes the space that is taken up by an HTML element. In this model, each element consists of four boxes: content, padding, border, and margin, as illustrated in Figure 16-1.
../images/320834_2_En_16_Chapter/320834_2_En_16_Fig1_HTML.png
Figure 16-1

CSS box model

Each of the three boxes surrounding the content can have different sizes on the top, right, bottom, and left of the element. Any or all of these sizes can also be set to zero.

Inline and Block

HTML has two primary categories of elements: block and inline. The box model ...

Get CSS3 Quick Syntax Reference: A Pocket Guide to the Cascading Style Sheets Language 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.