Deciphering the Box Model
June 22, 2017
In this lesson, you’ll learn:
- What the Box Model is
- The difference between
blockandinlineelements, and how to manipulate them to do what you want - How to add borders around elements
- How to add space within and around elements
- How to view the Box Model of each element on your page
What’s the Box Model?
The Box Model is the invisible box that outlines each element on a web page. Each box has a height and width, borders, margins, and padding. You can change these properties to create different effects.
Every element is a rectangle, stacked up on the page. Even round elements have an invisible rectangle around them.
Once you understand that each element is a box, you can learn to create complex styles and layouts on your web page. Let’s look at the properties of boxes.
The Display Property
One of the most important properties is the display property. This property determines what type of box an element is.
Some elements are block elements by default. These elements take up all the available width around them. They can’t sit next to another element, so they all take up their own line.
Some block elements with a border around them to see the outline clearly.
Even if you change the width of a block element, it still won’t allow another element to sit next to it on the same line.
The same 2 elements shortened to 50% width.
Most elements are block elements. These include headings, paragraphs, sections, divs, and images.
You can change the height, width, padding, margin, and border of block elements.
The rest of the elements are inline elements by default. This means they take up only as much space as they need. They can sit next to other elements on the same line, and if they’re too long, they’ll break in half and continue on the next line.
Some inline elements within text. They also have borders drawn around them to see the outline clearly.
Inline elements include text, links, and span elements.
Notice how in text, letters and words sit next to each other on the same line, and when they get too long, the line breaks and continues on the next line. That’s how inline elements behave.
You can’t change the height or width of an inline element, just like you can’t change the height or width of a printed word. It simply takes up the space it takes up, and that’s it. You can, however, add margins, padding, and borders, which we’ll look at later.
Next, let’s look at how to change the display property, and play around with some code.
Changing the Display Property
You can change the display property to make elements behave in the way you want them.
If you want a link to behave like a block element (taking up an entire line instead of flowing with the text), you can set its display property to block, as below:
.block-link {
display: block;
}Try it out below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block-link {
display: block;
}
</style>
</head>
<body>
<a href="https://www.google.com">Normal link</a>
<a href="https://www.google.com">Normal link</a>
<a href="https://www.google.com" class="block-link">Block link</a>
<a href="https://www.google.com">Normal link</a>
<a href="https://www.google.com">Normal link</a>
</body>
</html>Or, if you want a heading or other block element to behave like an inline element, you can set its display property to inline, as below:
.inline-heading {
display: inline;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-heading {
display: inline;
}
</style>
</head>
<body>
<h1>Normal Heading</h1>
<h1>Normal Heading</h1>
<h1 class="inline-heading">Inline Heading</h1>
<h1 class="inline-heading">Inline Heading</h1>
<h1>Normal Heading</h1>
</body>
</html>There is one more display type that will come in handy when making websites. This third type is called inline-block, and it’s the perfect blend of both block and inline. You can change the height and width of an inline-block element, but it will only take up its own space, allowing other elements to sit next to it.
If you want a link to become an inline-block element, you can set the display property as below:
.inline-block-link {
display: inline-block;
}The final option for the display property is to hide the element completely by setting it to none. This will hide the element and delete the space that it takes up. Everything inside the element will also disappear. (It’s still there in the code, but it’s hidden.)
.hidden-element {
display: none;
}Let’s try the inline-block and none display properties below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-block-link {
display: inline-block;
width: 50px;
}
.hidden-element {
display: none;
}
</style>
</head>
<body>
<a href="https://www.google.com">Normal link</a>
<a href="https://www.google.com" class="inline-block-link">Inline-block link</a>
<a href="https://www.google.com" class="inline-block-link">Inline-block link</a>
<h1>Normal Heading</h1>
<h1 class="hidden-element">Hidden Heading (You won't see me!)</h1>
</body>
</html>Now let’s look at changing the other properties of boxes.
Adding Borders
You’ve already learned how to set the width and height of an element. Now you understand that you can’t change the width and height of an inline element unless you change its display property to block or inline-block.
Now, let’s learn the other box properties. These are borders, margins, and padding.
All boxes have invisible borders that line the edges of an element. Even round elements have rectangular borders.
You can change the appearance of any element’s border by manipulating the border property.
The border property takes three values: border-width, border-style (which includes solid, dotted, dashed and more), and border-color. If you wanted to add a 3px-wide border with a solid line in the color black, you would write this:
.black-border {
border: 3px solid #000000;
}You can also set the properties separately if you choose:
.black-border {
border-width: 3px;
border-style: solid;
border-color: #000000;
}Let’s try this below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.black-border {
border: 3px solid #000000;
}
</style>
</head>
<body>
<div class="black-border">There's some text in here!</div>
</body>
</html>
Change the code above to break out the border property into its individual element, and verify that this still works.
Additionally, you can style each side of the box differently:
.black-border {
border-left: 3px solid #000000;
}Or do the same thing by setting each property separately:
.black-border {
border-left-width: 3px;
border-left-style: solid;
border-left-color: #000000;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.black-border {
border-left: 3px solid #000000;
}
</style>
</head>
<body>
<div class="black-border">There's some text in here!</div>
</body>
</html>
Both of these examples create a box with only a left border.
Adding Margins and Padding
Margins and padding add space within and between elements.
Margins add space outside of an element’s borders. This creates space between elements. (For example, adding space between two paragraphs.)
You can add a margin to all sides equally, or set different margins on each side. The following example will add a 12px margin on all sides of the element.
.element {
margin: 12px;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.element {
margin: 12px;
border: solid 2px;
}
</style>
</head>
<body>
<div class="element">There's some text in here!</div>
</body>
</html>
Note that we added a border just so that we can see the application of the margin more clearly.
Here’s how to add different margins to each side:
.element {
margin-top: 12px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 20px;
}So, the code will look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.element {
margin-top: 12px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 20px;
border: solid 2px;
}
</style>
</head>
<body>
<div class="element">There's some text in here!</div>
</body>
</html>Result:
Notice how the space is outside of the border of the element, not inside.
Padding adds extra space between the borders of an element and its contents. For example, if you create a text box with a black border, you can add padding to keep the text from touching the border.
You can add padding to all sides equally, or set different sides one by one. The following example will add 12px of padding on all sides of the element.
.element {
padding: 12px;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.element {
padding: 12px;
border: solid 2px;
}
</style>
</head>
<body>
<div class="element">There's some text in here!</div>
</body>
</html>Result:
Here’s how to add different padding to each side:
.element {
padding-top: 12px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 20px;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.element {
padding-top: 12px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 20px;
border: solid 2px;
}
</style>
</head>
<body>
<div class="element">There's some text in here!</div>
</body>
</html>Result:
Notice how this adds space inside the element, between the border and the contents.
When you understand how to use margin and padding to add space to your layout, you can create complex and beautiful web page designs.
Calculating the Width of a Box
If you set the width of a box to 400px, then add 20px of padding, 20px of margin and a 1px border to all sides, the box’s width will be 482px, not 400px.
Why? Because the extra space and borders on the left and right of the box are added to the width.
It’s important to keep the margin, padding, and border in mind when you write your code.
We mentioned that margin and padding add to the width of an element. But sometimes you’ll want to keep a box at a certain width no matter the margin, padding, and border.
For example, you may want a box to take up 50% of your web page and then add padding inside of it to create space around the text.
Two divs at 50% width.
If you set the width to 50%, then add 20px of padding and a border, you’ll see that the box grows bigger than 50%, which will ruin the layout.
After adding 20px of padding and a 1px border to the first box, the layout breaks.
To fix this, you can change something called the box-sizing property.
By changing box-sizing to border-box, you tell the browser to keep the box at the specified width, no matter how big of a border, margin, or padding you add.
.fixed-width-box {
box-sizing: border-box;
}Let’s try this out in code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fixed-width-box {
width: 49%;
display: inline-block;
box-sizing: border-box;
background-color: lightgrey;
}
.first-box {
padding: 20px;
border: solid 1px;
}
</style>
</head>
<body>
<div class="fixed-width-box first-box">This div is 49% width.</div>
<div class="fixed-width-box second-box">This div is 49% width.</div>
</body>
</html>Notice that when you add more padding, the box doesn’t grow wider. Instead, the space inside of it begins to shrink. With border-box, you know that the box will always be the width you set.
Checking the Dimensions of Your Box
You can check the width, height, padding, margin and borders of any box on a page using Developer Tools. This is a set of tools within your browser that allows you to inspect the elements of any web page.
To view Developer Tools in Chrome, right-click any area of the page and choose “Inspect.” If that doesn’t work, you can select it from the menu: View > Developer > Developer Tools.
This will open up a sidebar on your screen that shows a lot of information about the web page.
The Developer Tools window (photo from Chrome’s website).
To look closer at an element on the page, click the icon on the top-left that shows a cursor clicking a square. This allows you to select any element on the page. With this button selected, click the element that you’d like to inspect.
On the bottom right side of the Developer Tools window, you can see a drawing of the box model of the element you chose. In the middle, in blue, is the original width. You can see the padding, border, and margin in layers around the box.
Try to click on different elements and see their margin, borders, and padding.
Learn more about Developer Tools on Chrome’s website.
Congratulations, you’ve deciphered the box model! Now you know the basics about HTML and CSS, and how each element takes up space on the page.
Go to the next lesson to learn how to move elements around to create the complex layouts you see on the web today!