Part 3: The Box Model

Every HTML tag can be understood as a box with a particular height, width, margins, and padding. The CSS “box model” is how we control the size and arrangement of HTML elements on the page.

Remember that things like padding, margins, and borders are added to any width or height you’ve specified, making the total width or height larger. A div set to width:420px; will not fit in a 420 pixel space if it also has positive margin, padding, or borders assigned to it.

The total space occupied by an element follows these rules:
total width = width + padding-left + padding-right + margin-right + margin-left + border-left + border-right
total height = height + padding-top + padding-bottom + margin-top + margin-bottom + border-top + border-bottom