ColorCode

You can be a great CSS developer when you understand how and why your elements are displayed the way they are. One of the most important things to really fully understand is where an element starts, and where it ends. Most people think they know. But they don’t really know. They just look at the text inside the element, or how its children are rendered. But that’s not always the correct representation of the spacing or even the sizing of that element. It can be very misleading. So in order for us to be 100% sure how an element is constructed and displayed, we need to talk about the Box Model.

Every HTML element is considered to have an invisible box wrapped around it. You probably already think about elements that way. A couple of videos ago we added a light green background to our sections and they seem to be these separate rectangular boxes. But what’s happening inside that box? Or even outside for that matter? Here is what every element is made up of:

Content

Content is what you see inside the box. In the context of a paragraph, content is text itself. In the case of our <section> tags in our profile, the children are the content. So basically the visible part.

Padding

Padding is the space between the content and the edges of the box. This gives you room to show your content without feeling so cramped and claustrophobic. This is sometimes referred to as Negative Space. So how do you add padding? Simple:

p {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 0px;
}

// or use a shorthand
p {
    padding: 20px 10px 5px 0px;
}

Border

The border of your element, which by default has a width of 0px, is still a part of your element. Remember we are still talking about the paragraph element. We are not talking about a new border element or anything like that. This is still a part of the paragraph element. You can specify the border width, style and color. For example:

p {
    border: 3px solid orange;
}

Margin

And finally you have this magical property called Margin. Margin is the space around the visible part of the element. Outside the borders. Margins are what allow neighboring elements to be laid out next to each other, without bumping into one another. And the way you change margin is very similar to padding

p {
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 0px;
}

// or use a shorthand
p {
    margin: 20px 10px 5px 0px;
}

I guess this could also be considered Negative Space. I’m not a designer but I think every time you allow empty room for your content to breath you are essentially creating negative space.

And that’s it. That’s the Box Model.

So one more time: CONTENT. PADDING. BORDER. MARGIN. This, is the Box Model. And it applies to every single element. There are small caveats when dealing with inline elements but we’ll get there.

You can already see this for any of your elements, if you inspect it in chrome under the style tag. It shows you exactly what I just talked about. So,... in the next video, we’re gonna take our page and lay it out much much nicer using Box Model properties. See you there ;)