The Box model

Objectives

In this lessons, students will learn:

  • How the CSS box model works
  • How the width and height is measured

Files to Download
Box model text
Balloon
Klematis


box-components

The main thing to keep in mind when specifying the width and height is that it applies to the content area only.

The total width of an element includes the width of the content plus the total amount of padding, borders, and margins applied to the element.
class-box

The total size of the elements above will be calculated as follows:
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Advertisements