Every single element on a web page is a box. I know your <a> tag looks like a link, and your <img> looks like a picture, but the browser sees them all as rectangular boxes. Understanding these boxes is the most important thing you will learn in CSS.
The Four Layers
Every box has four layers, from the inside out:
- Content — the actual stuff (text, image, video)
- Padding — space between content and its border
- Border — the edge around the element
- Margin — space between this element and others
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 30px;
}Imagine an onion. Peel it, and each layer has a name. The content is the core, padding is the next layer, then the skin (border), and finally the space between this onion and the next one (margin).
How Big Is the Box Really?
This is where beginners get tripped up. If you set width: 200px, that usually means the content area is 200px wide. The actual space the element takes up on the page is:
total width = content + padding-left + padding-right + border-left + border-right
So a 200px wide box with 20px padding on each side and a 2px border on each side actually takes up 244px. We will fix this later with box-sizing.