We know more than a few HTML elements. You may be wondering how to get those elements to go wherever you want them on a page. For that, we use something called the box model.
The Box Model
The box model consists of four parts: content, padding, border, and margin.
Say you order something from your favorite online store. When you get your package you have a box. Inside the box is the product that you ordered, which has a width and a height. To protect your product, the store has wrapped it in bubble wrap or some other type of padding between the product and the box.
Just like your favorite online store, your browser places each HTML element in its own box. The HTML element is in the middle of the box. The space between the content and the edge of the box is called the padding, just like the padding in the package that you ordered. The border is simply the edge of the box. The margin is the space between the edge of the element’s box (border) and the edge of its neighboring elements borders.
The Box Model In Practice
We’re going to make a simple two paragraph HTML page and link it to a CSS file.
Next we’ll make a blank CSS file. If you’re following along, make sure you give it the same name as the file that is in the <link> tag in your hTML head. In my example, I named it “box-demo.css”
Let’s put a blue border around our paragraphs. We’ve done this before here.
Border & Content
The border is actually the edge of the box that HTML puts the content in. Notice how the border goes all the way across the page? This tells us two things. First, that the <p> tag is a block element, but we already knew that. Second, the content inside the CSS box model isn’t the text inside the tag, it is the tag itself.
The content, our <p> tag, has a width and a height. We can change these in CSS with the width and height properties. We’ll change our width to 300px and see what the difference is.
What happens to the text in the paragraph if we make our width even smaller?
The text comes to the end of the paragraph width and wraps to a new line. Let’s try another experiment. we’ll increase the size of the width to say 600px then re-size the browser window as narrow as it can go.
We lost the right side of our box. If there were text on that side, the user would have to scroll right to see it. The page is non-responsive. We want our sites and pages to be able to be responsive, to be able to adjust to any screen size. We can do this by measuring width not in pixels but in percent (%). Change the width to 50% and now try re-sizing the browser window.
Now when we re-size, the width adjusts also. We won’t lose the right side of our paragraph. But exactly what is that 50% of? It is 50% of the parent element. In this case, it is the body of the page.
We can adjust the height of the paragraph the same way we adjusted the width. Let’s make our <p> tags 200px tall and see what happens.
Note that changing the size of our paragraph doesn’t change the size of our text. We’ve covered that before, look here if you need a reminder on how to change the font size.
Padding is the space between the content and the edge of our CSS box. In the screenshot below, it is the space between our text and the blue border we put around our paragraph.
Currently, there is no padding. There isn’t any space between the text and the border. We’ll change that by giving our paragraph 10px of padding.
Let’s see what happens if we give our paragraph a lot of padding, say 100px.
Padding is the space inside the “box”, between the edges of the “box” and the content. The space outside the “box”, between the box and other elements, is the margin. We’re going to get rid of our padding and give our paragraphs a margin. Let’s try 50px to start.
Now there is a 50-pixel space all around both paragraphs. We can make it bigger…
smaller, or even get rid of the margin altogether.
Notice in the code above that there is no px, em, %, or anything other units of measure following the 0. For 0, and only 0, the units are optional. One other thing you can do with margin is set it to “auto”. That will center the element.
We can simplify our typing by using shortcuts for border, padding, and margin. In fact, we’ve been doing it all along. Just using margin (or border, or padding) by itself gives the element that much margin all the way around. We don’t need to set each border on its own.
We can even set each margin, padding, and border-width individually using the shortcut by using four values instead of one. The first number would set the top. The second number sets the right, the third sets the bottom and the fourth sets the left. If you have problems remembering the order, just remember that it starts at noon (top) and goes clockwise. The following will set the top margin to 10px, the right margin to 20px, the bottom to 5px, and the left to 15px.
Another shortcut you’ll see and use frequently is using the border-width, padding, or margin property with only 2 values. When this is done it is setting those properties in top and bottom, left and right pairs. For example, the following will set the padding of all paragraphs to 10px top, 10px bottom, 20px right, and 20px left.
CSS Properties To Remember