CSS Basics - Styling The Web
CSS Basics - Box Model

CSS Basics - Box Model

Understanding the Box Model Concept in CSS

Pritam Nandy's photo
Pritam Nandy
·

3 min read

Table of contents

What is Box Model and How it works ?

The CSS Box Model describes that how elements are structured and displayed in web pages . It helps to calculate the dimension of the position of the elements in web pages.

The Box Model consists of four areas : Content , Padding , Border and Margin.

  1. Content : This is the place where main contents like text, image etc. are displayed. This is the innermost area of the box. It controlled by properties width and height.

  2. Padding : This is the place around the content and the border . It is controlled by padding-left, padding-right, padding-top, padding-bottom .

  3. Border : The border wraps around the padding and content. Its thickness, style, and color can be customized using properties like border-width, border-style, and border-color.

  4. Margin : The margin is the outermost layer, creating space between the element and other elements. It is Controlled by margin e.g., margin-top, margin-bottom ,margin-right, margin-left.

Calculating total dimensions of the elements :

The formula to calculate the width and height is :

Total width = width + left padding + right padding + left border + right border + left margin + right margin

Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

Let’s see with an example :

<head>
    <style>
        p{
            width: 200px;
            height: 300px;
            padding: 15px;
            border: 10px solid red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>Chai aur code</p>
</body>
</html>

Total width = 200px (width) + 15px (left padding) + 15px (right padding) + 10px (left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 260px.

Total Height = 300px (Height) + 15px (Top Padding) + 15px (Bottom Padding) + 10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom Margin) = 360px

CSS Box Sizing

The box-sizing property in CSS is used to determine how the total width and height of an element are calculated. It controls whether padding and borders are included in the element’s overall dimensions or treated separately from the specified width and height.

  • Type of Box Sizing

    Content Box , Border Box and Inherit

  • Content Box (default)

    The width and height properties only include the content area. Padding and borders are not included in the specified dimensions and are added outside the content.

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

  • Border Box

The width and height properties include content, padding, and borders. The specified dimensions represent the total size of the element.

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

  • Inherit

    The box-sizing value is inherited from the parent element.

Conclusion :

By understanding and utilizing the box-sizing property, you can simplify layout design and avoid unexpected sizing issues.

ChaiCode