Foundations of Web Design: Introduction to HTML & CSS

08. The Box Model

Reminder

THE CODE EXAMPLES FOR THIS CHAPTER CAN BE DOWNLOADED FROM THE WEBSITE (HTTP://FOUNDATIONSOFWEBDESIGN.COM).

All HTML elements displayed in the browser are drawn in a “box” shape. While the shape isn’t always a perfect square, it does have four sides—top, right, bottom, and left—and a central content area surrounded by an area of padding, then a border, then an outer margin area (Figure 8.1). CSS can target these sides to manipulate elements in various ways; for example, by adding padding, margins, and borders to the ...