learntheweb

Menu
Sign Up
Log In

Lesson Content

The CSS Box Model

Introduction

Have you noticed that so far, every single HTML element automatically shows up on the top left corner of the screen? Let’s fix that. In this lesson, we‘ll explore the powerful CSS Box Model and how to use it to customize the layout of a web page. We‘ll explore how to use margin and padding to adjust the spacing between elements and create a more visually appealing design.

Overview

By the end of this lesson, you should be able to:
    • Understand what the box model is and how it relates to HTML and CSS
    • Understand what the terms margin and padding are and how they are used
    • Understand how to use margin and padding to move elements around a screen

The Box Model

Here is a simple HTML website with a title and some content:

Looks normal right? Let’s go ahead and put a red border on every single element with our universal selector. (If you don’t know what is, go back to this CSS selectors lesson). How do you think it will look?

As you can see, all of our HTML elements have been highlighted with a red box around it. This is what the CSS Box Model says. The box model is a way of thinking about how HTML elements are laid out and styled in CSS. 

 

Go ahead and open up any website notice how everything is a box? Buttons are boxes, links are boxes, you can imagine a website as nothing more than just a bunch of boxes arranged and laid out in a specific and aesthetically pleasing way. 

 

Understanding the box model and how it works will be very useful in understanding how we can move items around the screen using margin and padding.

 

So what is margin and padding? Take a look at this diagram explaining it:

Ok, let’s dive into what margin and padding really mean. 

    • Margin is the space between the border and the edge of the screen. We can easily move elements around the screen by setting different margins as you’ll see in the next section. In the example above, everything in the light-beige color is the margin because it is the space outside the element.

    • Padding is the space inside of the element. In the above picture, everything in blue is the padding because it is the space inside of the element.

Using Margin

We know that margin is the space from the border of an element to the edge of the screen. So how can we use that information to move our elements around the screen? Take a look at this:

In the first example, the red square has a default margin of 0, which means it is placed in the top right corner of the screen (by default). Remember that margin is the space outside an element. The default value for margins is 0 unless specified otherwise.

 

In the second example, the left margin of the red square is set to 500 pixels, which moves the square 500 pixelsaway from the left side of the screen. This is a basic example of how margins and padding can be used to position elements on a web page. Let’s take a look at one more example, except a bit more complex.

Here, we are not only changing the left margin like in the previous example, but we are also changing the margin on the top as well. The margin-top declaration is essentially setting the distance from the top of the screen to the box as 200 pixels. This is how we are able to move elements around our screen using margin. Let’s look at one last example, but this time we will add in another element to see how we can change multiple objects!

In  this example, we created two box elements and we are moving them around using margin inside of our website. 

 

All the examples above show us using margin to set the distance from an element to the edge of the screen, but in reality, margin can be used to set the distance between multiple elements, items in a list, and much more! At the bottom of this lesson, some resources will be provided on margin and padding if you want to dive a bit deeper into this topic!

Using Padding

Margin is great if we are moving elements from other elements, or setting a certain distance we want elements to be from each other, but what if we wanted to change the spacing inside the actual element itself? If we want to adjust the spacing within an element itself, we can use the CSS property padding. Padding allows us to adjust the amount of space between the element‘s content and its border, giving us more control over the element‘s appearance.

 

Here is the basics of how it works:

In the first example, we are not adding any padding to our box. As you can see, the text has stayed in its default position which is in the top left of the element.

 

In the second example, we added a padding of 100px. Doing this pushes the text out 100px in all directions.

Just like what we did with margin, we can also use padding to push out our elements/text in certain directions using the top, bottom, left, right Here is how we do it:

Along with padding-top and padding-left, we can do padding-right and padding-bottom. By now, you should be comfortable with understanding how padding and margin work and how we can use them to move elements around our screen along with moving the text in other elements. 

 

Before moving onto some practice, we are going to cover the property box-sizing: border-box; Notice in the above example when we add padding to our box, the size of the box changes? That is because when you add padding to an element, you are also changing its size by the amount of padding specified. This can be very annoying when trying to keep elements the same size. 

 

Luckily, CSS gives us the box-sizing: border-box; property which solves this problem. box-sizing allows us to add padding to an element without changing its size. Take a look:

As you can see, box-sizing allows us to keep the size of our element the same while also moving our text around using padding. Box-sizing is a great tool if you want to keep certain elements on your website the same size and still want to move elements around!

Practice

Let’s continue practicing our CSS skills by focusing on padding, margin, and box-sizing! Follow the instructions below to create two different styled boxes:

    1. First, set up an HTML file and CSS file and link them together.
      1. Create a <div> tag with some text inside of it. Any text will suffice.
      2. Set the background color using an rgb value. You can choose any color you like!
      3. Set the padding to 30px and the margin to 20px.
      4. Next, add another <div> tag with some different text inside of it.
      5. Set the background color using another rgb value. Choose a color that contrasts well with the first box!
      6. Set the padding to 10px and the margin to 50px.
      7. Now, let’s change the box-sizing property of the second box to border-box.
      8. Finally, add a <h1> tag with some text inside of it at the top of the page.

    2. Let’s go ahead and try one more practice problem. Instead of us giving you the specific details to add to your code, it’s time for you to try it on your own!
      1. Try creating a box of some sort and move it to the center of the screen. It should be centered vertically and horizontally! Give it a shot and play around with margins and padding!

These practices help us understand the properties of padding, margin, and box-sizing, and how we can use them to style our website. In the next lesson, we will learn how to use flexbox to create more complex layouts!

Find an issue/typo/error with our content? Please report it here

Last Lesson
Course Page
Next Lesson