What is the Box Model in CSS : Explained With Examples

Margins, borders, and padding, oh my! This article explains what is the Box Model in CSS to shape your web page. In this CSS margin, border, and padding attributes are applied to any HTML element to produce an individual effect. They work to keep your website organized and attractive. The border property could appear more familiar than the three because it is usually easily recognizable on a web page.

However, if the developer did not additionally modify the padding and margin values, the border property would not look as presentable as it does on most websites.

What Is the Box Model in CSS?

The CSS box model basically covers each HTML element in a box. The box model includes four layers (as seen in the image below), and each layer provides a specific purpose.

The first layer is located in the box model’s center. This is the position that each HTML element is given. The auto x auto value is currently displayed from the center position in the figure above, however, this value will be changed with the width x height of each HTML element.

While the margin property is on the border properties outside, the padding property is in between the HTML element and the border property. The padding and border properties do not appear to have default values for most of CSS elements. Some HTML elements, such as the p element, have a predefined value for the margins property value, which is 16px on both the top and bottom.

Using the CSS margin Property

Margin-top, -right, -bottom, and -left are the four sub-properties that make up the margin property. Individually, these attributes are used to set the required margin size on a given side of an element, or as a group by simply using the shorthand margin property.

Structure of the margin Property

Selector {
    margin: margin-top margin-right margin-left margin-bottom;
}

The previous example shows the fundamental structure of the margin property. The first value in the value layer assigned to the margin property targets the top of an element, the second the right, the third the left, and the fourth the bottom.

Using the margin Property Example

p{
    margin: 20px 10px 20px 10px;
} 

The code above successfully assigns a top margin of 20px, a right margin of 10px, a bottom margin of 20px, and a left margin of 10px to all p elements on a particular web page. However, the same result as produced by the code above can be achieved with less code:

p {
  margin: 20px 10px;
}

The previous code line has the same effect as the previous code line. The first value for the margin property targets the top and bottom of all p components on a web page, while the second value targets the right and left sides.

Use the following code to achieve this if the margin that needs to be provided to an HTML element’s four sides is the same:

p {
  margin: 20px;
}

The code above adds a 20px margin to all four borders of a web page’s p element.

Using the CSS border Property

The border property is the third layer in the CSS box model. The border property, like the margin, has various sub-properties that can be used in a measured value. However, unlike the margin property, not all border sub-properties are required for the border property to function properly. There is only one required property: the border-style property.

Basic border Property Structure Example

Selector {
  border: border-style;
}

The border-style attribute in the preceding example can have one of the multiple values. For example, if you want a solid border around all of your web page’s paragraphs, the following code can help:

p {
  border: solid;
}

With the four sub-properties of the border property, a developer can target specific sides of an HTML element:

• border-left 
• border-right
• border-top
• border-bottom

If you only need a border on one side of an element, use the relevant sub-property from the list above.

Using the border-style Property

Every HTML element is bordered by the border property, even if it is not always displayed. You’re unable to view the border property in some cases due to the border-style property’s default value of none. The border-style property can be set to a variety of various values, some of which are as follows:

• Solid
• Double
• Dotted
• Dash

Using the border Property with a Stack Value

To achieve a certain result, the border property might be assigned one of three values. These are the characteristics border width, border style, and border color. As a result, if you want to create a solid red border around a paragraph with a width of 2px, use the following code:

p {
  border: 2px solid red;
}

Using the CSS Padding Property

The margin property and the CSS padding property are extremely similar. Padding-top, padding-right, padding-bottom, and padding-left are the four sub-properties that make up the padding property. Each sub-property can be used alone or delivered to the padding property as a stack value.

Similar to margin, if the padding attribute is given only two values, the first will target the element’s top and bottom, and the second will target its left and right sides. All sides will have the same amount of padding if only one value is given.

On each of the p elements on a web page, all three of the lines of code that follow will produce the same result.

Using Four Padding Values

p {
  padding: 20px 20px 20px 20px;
}

Using Two Padding Values

p {
  padding: 20px 20px ;
}

Using One Padding Value

p {
  padding: 20px ;
}

CSS Box Model usage

No matter what kind of page it is, using the border, margin, and padding features can help you organize it. Here’s how to combine them:

Example of a Simple HTML Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Box Model</title>
  </head>
  <body>
    <div class="box">
    <!-- Organize Page Layout with Box Model -->
     <h1>Heading One</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem
        recusandae id est. Rem, quod odio. Doloremque nemo libero, fuga suscipit
        dignissimos soluta iusto ullam ducimus rerum labore necessitatibus
        facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore
        necessitatibus facilis.
      </p>
    </div>
    <div class="box">
      <h1>Heading Two</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem
        recusandae id est. Rem, quod odio. Doloremque nemo libero, fuga suscipit
        dignissimos soluta iusto ullam ducimus rerum labore necessitatibus
        facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore
        necessitatibus facilis.
      </p>
    </div>
  </body>
</html>

Each of the two div elements in the image above has a heading and a paragraph. By using the border property, you can see what’s going on on the page more clearly.

Using the border Property

.box {
  border: solid;
}

The output in your browser that results from using the previous CSS code is as follows:

The border property has a default width of 3px now that it is visible. The margin property is on the borders outside side, as can be seen from the box model up top. As a result, you can utilize it to separate the two div elements that are touching.

Using the margin Property

.box {
  border: solid;
  margin: 20px;
}

The output produced by the code above, when the margin is included, looks like this in your browser:

I think that’s a little bit stronger. The div elements are separated by sufficient space. Now that the padding attribute has been defined in the box model, you can concentrate on the area inside the border.

Using the padding Property

.box {
  border: solid;
  margin: 20px;
  padding: 10px;
}

The result from the code above will look like this in your browser:

The padding property has caused the text inside the border to shift away from the boundaries, as seen in the image above. The box model below indicates how all of the layers are currently being used.

Try Different CSS Properties

You now have a concept of the box model and how each component functions with the others to produce a particular outcome. You can experiment with replacing the border property with its border-left sub-property and see what occurs, or you can try providing a stack value to the border property to make the border color red. In this post, you learned what is the box model in CSS and how to Organize Page Layout with Box Model.

With the help of the CSS cheat sheet, you can play with all of the additional CSS properties available to you.