CSS Box Model (with Example)

The box model is a very important concept in CSS that determines how elements are structured, positioned, and displayed on a webpage. It gets its name because the CSS treats every element as if it were in a rectangular box.

In other words, CSS displays every marked up element in the browser window as a box with content. Each box of content represents an element in the HTML document or webpage.

Each content box can have several components, including margins, borders, padding, and the actual content together, as shown in the below figure.

The sides of a box are represented in clockwise order: top, right, bottom, and left. The space around outside of an element is called margin. Inside the margin, there is a border and inside the border is the padding.

Inside the padding, there is a content of the element. Look at the below figure where is an example of CSS box model for an HTML element.

An example of CSS box model for an HTML element,

Components of the CSS Box Model

In the above diagram of CSS box model, you see how different components that come together to make a box model. The CSS box model comprises four main components that are as follows:

1. Content Box:

This is the area where the actual content of the element, such as text or images, is displayed. The width and height properties define the dimensions of this box.

The width property specifies the width of the content area, while the height property specifies the height of the content area. For example:

div {
   width: 200px;
   height: 150px;
}

2. Padding Box:

Surrounding the content box is the padding. It is the space between the content of the box and its any defined border. In other words, it is the space between the border of the box and the content of the box.

You can set the padding individually for each side using the padding-top, padding-right, padding-bottom, and padding-left properties, or collectively using the shorthand padding property. For example:

div {
   padding: 10px; /* 10px padding on all sides */
}

div {
   padding-top: 20px;
   padding-right: 15px;
   padding-bottom: 20px;
   padding-left: 15px;
}

3. Border Box:

The border surrounds the padding and the content of an HTML element. By default, a border is invisible that separates the edge of one box from the other surrounding boxes. We can define the border’s width, style, and color using properties like border-width, border-style, and border-color or collectively using the shorthand border property.

A shorthand border property sets the width, style, and color of the border at once. We can also use the individual properties of border-width, border-style, and border-color individually for each side of the HTML element. For example:

div {
   border: 2px solid #000; /* 2px solid black border */
}

div {
  border-width: 3px;
  border-style: dashed;
  border-color: #ff0000;
}

4. Margin Box:

The margin is the distance between a box’s border and the box next to it. It creates a white space that separates one box from the other boxes. We can individually set margins for each side using margin-top, margin-right, margin-bottom, and margin-left, or collectively using the margin shorthand property.


A shorthand margin property sets all four margins, such as top-margin, right-margin, bottom-margin, and left-margin at once. For example:

div {
   margin: 20px; /* 20px margin on all sides */
}

div {
   margin-top: 30px;
   margin-right: 15px;
   margin-bottom: 30px;
   margin-left: 15px;
}

Thus, we can say that CSS box model is a collection of properties that define the amount of white space around an HTML element, dimensions, margins, borders, and padding.

Types of Box Model in CSS

There are mainly two types of box model in CSS. They are:

  • Block-level boxes
  • Inline-level boxes

The block-level boxes represent the block-level elements, while the inline-level boxes represent inline-level elements. The block-level elements always start on the next line, while inline elements start on the same line.

Simple Box Model with Margin, Padding and Border

Let’s take an example in which we will style a div element using all CSS box model properties.

Example 1:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Box Model Example</title>
<style>
.box {
   width: 300px;
   height: 200px;
   padding: 20px;
   border: 5px solid blue;
   margin: 30px;
   background-color: lightgray;
}
</style>

</head>
<body>
   <div class="box">
      This is a box with margin, padding and border.
   </div>
</body>
</html>

Output:

Simple CSS box model example.

In this example:

  • The width and height of the content area are 300px and 200px, respectively.
  • Inside the border, the padding adds 20px of space around the content.
  • The border is a solid blue line with a width of 5px.
  • The margin adds 30px of white space outside the border, separating the box from other elements.

Nested Boxes in CSS

When one box is placed inside another box is called nested boxes in CSS. In other words, placing one HTML element inside another HTML element is called nested elements in CSS. The element which is placed inside another element is called child element of that element. The element which contains another element inside it is called containing or parent element.

The topmost box represents the topmost element known as <html> element. Every other box is inside another box, which could also be inside another, and so on. It means that an element that is a parent of one element can be a child element of another, and so on.

This creates a hierarchy of block boxes where each element can contain other elements, and those elements can also contain additional elements, forming a nested structure of elements.

In the example 1, there is a rendered HTML document with a hierarchy of block boxes. The outmost is the <html> element, the next is the <head> element which contains <meta>, <title> and <style> elements. After <head> element, the next is <body> element, which contains a div element.

Key Concepts of Nested Boxes:

(1) Parent-Child Relationship: The parent box contains the child box. Styles applied to the parent box can affect the child box, especially in terms of positioning, padding, margins, and borders.

(2) Inheritance: Child elements inherit some CSS properties from their parent elements. For example, a child element inherits font styles and colors from its parent element.

(3) Box Model Calculations: Each element, whether parent or child, follows the CSS box model independently. This means that margins, borders, and padding are calculated separately for each element.

Nested Boxes Example

Example 2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Boxes Example</title>
<style>
.outer-box {
    width: 400px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightblue;
}
.inner-box {
    width: 380px;
    padding: 10px;
    border: 2px solid green;
    background-color: white;
}
</style>
</head>
<body>
    <div class="outer-box">
        This is an outer box.
        <div class="inner-box">
             This is an inner box.
        </div>
    </div>
</body>
</html>

Output:

An example of nested boxes in CSS.

In this example:

  1. Outer Box:
    • Width: 400px
    • Padding: 20px
    • Border: 5px solid black
    • Background Color: Light blue
  2. Inner Box:
    • Width: 380px
    • Padding: 10px
    • Border: 2px solid green
    • Background Color: White

Calculation of Dimensions:

1. Outer Box:

  • Total Width:
    • Content: 400px
    • Padding: 20px on each side (20px + 20px)
    • Border: 5px on each side (5px + 5px)
    • Total: 400px (content) + 40px (padding) + 10px (border) = 450px
  • Total Height:
    • It depends on the content inside, including padding and border. Since height is not explicitly set, it grows to fit the content.

2. Inner Box:

  • Total Width:
    • The width is set to 380px.
    • After subtracting the inner box’s padding and border:
      • Padding: 10px on each side (10px + 10px) = 20px
      • Border: 2px on each side (2px + 2px) = 4px
      • Final content width: 380px – 20px (padding) – 4px (border) = 356px
  • Total Height:
    • Similar to the outer box, it depends on the content and grows to fit it.

Box-Sizing Property in CSS

CSS provides a box-sizing property that is used to change the default CSS box model for an HTML element. This property allows us to more control over the layout by affecting the calculation of width and height of an element. The box-sizing property accepts two main values. They are as:

1. content-box (default value):

  • This value only includes the width and height properties for the content of the element.
  • Padding and border are added outside of the content box, increasing the total size of the element.

2. border-box:

  • This value includes the width and height properties as well as the content, padding, and border. It means that the total width and height of an element will stay the same as specified, with the padding and border included within these dimensions.

Example 3: Using content-box (default value)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Box Example</title>
<style>
.content-box {
    box-sizing: content-box;
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid red;
    background-color: lightgray;
}
</style>
</head>
<body>
    <div class="content-box">
        This box uses the box-sizing property with content-box value.
    </div>
</body>
</html>

Output:

An example of box-sizing property with content-box value.

In this example:

  • The specified width is 300px, and the height is 200px.
  • The total width is 300px (content) + 20px (left padding) + 20px (right padding) + 10px (left border) + 10px (right border) = 360px.
  • The total height is 200px (content) + 20px (top padding) + 20px (bottom padding) + 10px (top border) + 10px (bottom border) = 260px.

Example 4: Using border-box value

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Box Example</title>
<style>
.border-box {
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
    <div class="border-box">
       This box uses the box-sizing property with the border-box value.
    </div>
</body>
</html>

Output:

An example of box-sizing property with border-box value in CSS.

In this example:

  • The specified width is 300px, and the height is 200px.
  • The total width and height remain 300px and 200px respectively, because the padding and border are included within these dimensions.

The border-box property is often used to create layouts because it simplifies the calculation of element sizes. We don’t have to add up the padding and border to fit an element within a particular area. It’s common practice to set box-sizing: border-box globally for all elements using the universal selector that we can do like this:

*,
*::before,
*::after {
     box-sizing: border-box;
}

Example 5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of Global border-box Setting</title>
<style>
/* Apply border-box globally */
*,
*::before,
*::after {
     box-sizing: border-box;
}
.container {
    width: 400px;
    padding: 20px;
    border: 10px solid black;
    background-color: lightblue;
}
</style>

</head>
<body>
    <div class="container">
        This container uses the box-sizing property with the border-box value that is globally set for all other elements.
    </div>
</body>
</html>

In this example, the specified width of the .container is 400px. The total width remains 400px, including padding and border, because of the globally setting border-box value.

By setting box-sizing: border-box globally, every element on the page will automatically use this box model. So, you don’t need to specify it individually for each element on the document. This approach helps web developer to maintain consistency across your entire layout.

The CSS box model is a fundamental concept in which an HTML document is viewed as a hierarchy of rectangular boxes. Each box in the document represents a block-level element or inline-level element. The box model provides a structured way to control the spacing and dimensions of elements on a web page.

By understanding and utilizing the properties of content, padding, border, and margin, you can control the layout and spacing of elements on a web page. I hope that you now understand the basic concepts of the CSS box model.

Related Posts

Trending now

What Is Cybersecurity Risk Management
Variadic Functions in PHP
PHP Arrays
Indexed Array in PHP