First of all, let us remind ourselves what CSS is. Cascading Style Sheet (CSS), is a styling language for web pages and applications. With the latest version of it being CSS3. It is in charge of the beautiful presentation and design of the web pages we see on the browser, including colors, fonts, and layouts. It also makes viewing these pages possible on both large and small-screen devices with internet access.

What is the CSS Box Model?

All information on the browser has a box around it. The CSS Box Model therefore is the container that surrounds content that contains all the properties of that content which includes border, margin, padding, and the content. All these put together create the presentational design of the web pages in the client(browser).

Below is a diagram to illustrate a box model:

CSS Box Model Properties Explained:

As we learned earlier, the CSS Box Model has various properties, as shown in the diagram above.

Margin

The margin is the outermost layer of the box. It’s the area that wraps the border, padding, and content as whitespace in between the box and other properties. The property name margin is used when styling the margin area on all sides.

Border

The border wraps the padding and the content. It can be applied to all sides of the box or the selected areas where needed. The property name border is used when styling the border area on all sides.

Padding

The padding area sits close to the content as white space and it's close to the border area. The property name padding is used when styling the padding area on all sides.

Content

This is the area where the content of your web page is displayed. These contents may include texts, images, links, and/or other forms of media content. We can style this content using different property names such as; width, height, block-size, and so on.

Here is an example of how to use a CSS Box Model:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>CSS Box Model</title>

    <style type="text/css">

      .main {

        font-size: 40px;

        font-weight: bold;

        margin: 40px;

      }

      .content {

        margin-left: 40px;

        border: 50px solid #f6bb;

        width: 300px;

        height: 200px;

        text-align: center;

        padding: 50px;

        align-items: center;

      }

      .content1 {

        font-size: 42px;

        font-weight: bold;

        color: #e88948;

        margin-top: 40px;

        background-color: #888;

      }

      .content2 {

        font-size: 18px;

        font-weight: bold;

        color: #e88948;

        margin-top: 40px;

        background-color: #888;

      }

    </style>

  </head>

  <body>

    <div class="main">CSS Box Model Property</div>

    <div class="content">

      <div class="content1">Learning CSS Box Model</div>

      <div class="content2">

        CSS Box Model is a great concept for styling content.

      </div>

    </div>

  </body>

</html>

This will be the output below:

Conclusion

The CSS Box Model is a great concept of styling in CSS. Having a solid understanding of this integral concept of design is important to help you as a developer create better designs for your web projects and elements on your web applications. By reading up to this level, I am pretty sure you have gained a solid foundational understanding of the concept of CSS Box Models and layouts.

Thanks and happy learning!!!