Box Model

To produce web pages using HTML and CSS, you need to know how the elements they contain are created and laid out. Whether it's a piece of text, an image, or an emoticon, every element uses a box with properties that determine how it will be placed on the webpage. This concept is known as the Box Model, and you will learn all about it by reading this topic.

What is the Box Model?

As its name suggests, the Box Model is a term used to describe a container — it wraps the properties of the HTML element within it. These properties combine with the content to form the whole element.

According to the Box Model, all the elements on a webpage (block elements and inline elements) generate boxes around themselves. And properties like margin, padding, height, width, and border can be applied to these boxes.

The following Box Model diagram should make this easier to understand:

In the above image, the HTML content is in the middle and it's surrounded by padding, border, and margin components.

Let's deep dive into the detail of these components.

Content

The content area contains one of the items in the document, such as a piece of text or an image. The height and width properties are used to change its dimensions (you can read more about them in the final section of this topic).

Take a look at the following example:

HTML:

<p>I am learning about the Box Model.</p>
<p>The Box Model is amazing.</p>

CSS:

body {
    background-color: lightcoral;
}

p {
    border: 1px solid blue;
}

As shown above, two p tags with some content are present on the webpage — they have a blue border around them without any padding. By default, the p tag's margin-top and margin-bottom are set to 16px.

Padding

Padding is the space between the border and the content. It can be applied to all the sides of the box (top, right, bottom, and left). padding-top, padding-right, padding-bottom, and padding-left are used to alter the space between the content and the border of the element.

CSS:

p {
    border: 1px solid blue;
    padding: 10px;
}

In the above example, the p tag's padding is set to 10px, so the space around the content and inside the border is increased.

Now let's make some changes to the padding of these elements:

CSS:

p {
    border: 1px solid blue;
    padding: 10px 30px 2px 40px; /* top - right - bottom - left */
}

Bear in mind that the p tag takes up the whole width within the border because it's a block element.

Also, note that padding-right is 30px, so there is 30px of padding on the righthand side. This isn't visible in the example but you can check it using dev tools.

Another example using different padding values can be seen below:

CSS:

p {
    border: 1px solid blue;
    padding: 10px 5px 30px; /* top - right & left - bottom */
}

Border

The region between the padding and the margin is the border. The border area surrounds the content and the padding. You can change the element's border by using border-width, border-style, and border-color, or with the shorthand property border.

CSS:

p {
    border: 10px solid blue;
    padding: 10px;
}

The border is applied to the p tags in the example above, and it takes up the whole width of the line as they are block elements.

Margin

The margin is the outermost layer. It encapsulates the border area and extends to the edge of the box. In the diagram at the start of this topic, the margin is indicated with blue color. But in reality, margins are always transparent, so the parent element's background is visible in the margin area.

You can change the margin of an element by using margin-top, margin-right, margin-bottom, and margin-left, or with the shorthand property margin.

CSS:

p {
    border: 1px solid blue;
    padding: 10px;
    margin: 20px; /* top & right & bottom & left */
}

In the above example, the p tag's margin has been set to 20px and, as you can see, the space outside the border has increased.

Another example using different values is shown below:

CSS:

p {
    border: 1px solid blue;
    padding: 10px;
    margin: 10px 30px 10px 5px; /* top - right - bottom - left */
}

CSS:

p {
    border: 1px solid blue;
    padding: 10px;
    margin: 10px 15px; /* top & bottom - right & left */
}

Height and width

Setting the height and width of an element affects the size of its content (text, image, etc.). But if the element also has padding and border values specified, its height and width can change drastically. For example, let's say the width of an element is 200px and you set its padding to 20px and border to 10px on all sides. In this scenario, the full width of the element actually becomes 260px.

Let's take a look at how this is calculated:

Height = height + padding-top + border-top + padding-bottom + border-bottom

Width = width + padding-left + border-left + padding-right + border-right

Conclusion

You now know how elements are created and rendered on a webpage. You've learned that all HTML elements directly or indirectly form rectangular boxes. Also, that various properties like height, width, margin, padding, and border are associated with these boxes. Using these properties allows you to position elements on your web pages in the way you want.