Chapter 8
The Box Model
In Chapter 7, we saw how to set sizing parameters; in this chapter, we’ll apply such sizing to one of the most important concepts in web design: the box model.
You may recall from Section 4.3 that, when rendering HTML, the browser considers a page to be a collection of different boxes that contain content. Along with height and width, boxes can be styled to have borders (a line around the box), margins (the distance away from other boxes), and padding (empty space inside the box separating content from the border).
The CSS box model is the name for all the rules that determine how height, width, margin, padding, and borders are applied to elements (Figure 8.1). Some aspects of the box model can be quite confusing. There ...
Get Learn Enough HTML, CSS and Layout to be Dangerous: An Introduction to Modern Website Creation and Templating Systems 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.
