CSS Tutorial — Box Model (10/13)

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. Oh look, 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? In order to explain, I’ll use a simpler element like a paragraph and I’ll give it the same green background so you can see. Here’s what the box is made out of:

CONTENT - what you see inside the box. In the context of a paragraph, content is text itself. In the case of our Sections in our profile, the children are the content. Ok so we got the content, the visible part.

Then you have 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. Using the padding property, to change all sides at once, So let’s say padding: 20 pixels. or more specifically padding-top, right, bottom or left. Ok, so we got a little room to breath.

Then there is the BORDER. The border of your element, which by default is 0, nothing, is still a part of your element. Remember we are still talking about the paragraph element, we’re 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: BORDER… 3px… SOLID... ORANGE. Cool. Looking good.

AAAAAAND 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, top, right, bottom left, except they start with margin. 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, We got: 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, and go to this helper tool 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 ;)