CSS Box Model

Hari Sapna Nair
Last Updated: May 13, 2022

Introduction 

A strong command of CSS is necessary for anyone who wants to master front-end web development. A good front-end developer should design the layout and build a clean and user-friendly site using CSS. And for this, fundamental concepts like the CSS box model, CSS position, CSS display, etc., are essential.

 

Check out the blog Best CSS properties for a Front-end developer to know the important properties related to CSS.

 

While design and layout, the term "box model" is commonly used in CSS. In CSS, everything displayed on the screen is a box. Therefore understanding the concept of the CSS box model becomes a necessity to excel in CSS. In this blog, we will cover the CSS box Model concept in depth.

CSS Box Model

The CSS box model defines the structure of HTML elements present on the webpage. Every webpage has different boxes that form the skeleton of that web page. The CSS box model is a box that wraps around every HTML element and forms the overall structure of the web page. CSS Boxes can either be blocks or inline. Box types are changed by using the display CSS attribute.

 

CSS box model consists of the following parts: 

  1. Margins
  2. Borders
  3. Padding
  4. Actual content

 

CSS Box Model

 

Let's discuss each one of them in detail.

Margin

The margin defines the space outside of an element's border. It is the empty space between a box and its surrounding boxes. As you can see from the above image, the margin is the first item encountered externally. The margin does not necessarily affect the size of the box, but it affects how that element interacts with other elements.

 

The values the margin property can have are as follows:

 

Value

description

automargin calculated by the browser 
inheritthe margin value of the parent element is inherited
lengthspecifies a margin in cm, px, pt, etc
%specifies a margin in % of the width of the containing element

 

Let us look at the various ways to give margin values.

 

  • When margin property has only one value:

 

 margin: 10px;

 

All the sides would have a margin of 10px.

 

  • When margin property has two values:

 

 margin: 20px 40px;

 

The top and the bottom will have a margin of 20px, and the left and the right margin will have a margin of 40px.

 

  • When margin property has three values:

 

 margin: 20px 40px 60px;

 

The top will have a margin of 20px, the left and the right margin will have a margin of 40px, and the bottom will have a margin of 60px. 

 

  • When margin property has four values:

 

 margin: 20px 40px 60px 80px;

 

The top will have a margin of 20px,  the right will have a margin of 40px, the bottom will have a margin of 60px, and the left will have a margin of 80px.

 

  • Else all the margin values can be individually assigned.

 

margin-top: 20px;
margin-right : 40px;
margin-bottom : 60px;
margin-left : 80px;

 

The margins will be assigned corresponding to the sides in this case.

Border

The line around the element immediately after the margin is called the border. Every element has a border assigned to it, but most elements do not show it by default.  Like margins, borders can also be assigned to the element's top, bottom, left, and right. The CSS border properties specify the style, width, and color of an element's border.

 

Let's look at an example to set the border to a div.

 

border: 5px dashed black;

 

A border with 5px width, black color, and dashed style.

 

The border properties can also be set individually using the following properties:-

Border property

Description

border-widthsets border width with values in px, ems, etc
border-stylesets border styles with values as dotted, solid, dashed, etc
border-colorsets the color of the border

Padding

The CSS padding properties generate space around an element's content within the defined borders. Padding also has top, right, bottom, left values similar to the margin property. The rules to describe them are also similar to the margin property. 

 

Let's look at the different ways to use them.

 

  • The below syntax sets the padding on all sides as 10px.

 

padding: 10px;

 

 

  • The below syntax sets the padding of the top and bottom as 20px and the padding of the left and right as 40px.

 

padding: 20px 40px;

 

 

  • The below syntax sets the padding of the top as 20px, the padding of the left and right as 40px, and the padding of the bottom as 60px.

 

padding: 20px 40px 60px;

 

 

  • The below syntax sets the padding of the top as 20px, the padding of the right as 40px, the padding of the bottom as 60px, and the padding of the left as 80px.

 

padding: 20px 40px 60px 80px;

 

  • The below syntax sets the padding of the top as 20px, the padding of the right as 40px, the padding of the bottom as 60px, and the padding of the left as 80px separately.

 

padding-top: 20px;
padding-right: 40px;
padding-bottom: 60px;
padding-left: 80px;

Content

The content of the box, where text and images appear, is called the content area. The dimensions of the content area are controlled by the CSS width and height properties. 

 

The total width of an element is the sum of its left and right border values, the left and right padding values, and the content area width. 

 

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

 

Similarly, the total height of an element is the sum of its top and bottom border values, the top and bottom padding values, and the content area height.

 

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

 

The box-sizing property can also calculate the width and height of an element. The different values possible for the box-sizing property are as follows:

 

Value

Description

initialit sets the box-sizing property to its default value.
inheritit inherits the box-sizing property from its parent element.
content-boxthe width and height properties include only the content area, i.e., the border and padding are excluded.
border-boxthe width and height properties include only the content area, border, and padding.

 

Example:

 

<style>
   div {
       padding: 10px; 
       width: 200px;
       height: 50px;
       background-color: red;
       color: white;
       margin: 25px;
       font-size: 2rem;
       border: 2px solid black;
   }
   .contentBox {
       box-sizing: content-box; 
   }
   .borderBox {
       box-sizing: border-box;
   }
</style>
<body>
   <div class="contentBox">
       content-box
   </div>
   <div class="borderBox">
       border-box
   </div>
</body>

 

Output:

 

As you can see in the content-box case, the width and height properties are only applied to the content area of the div element. Whereas in the border-box case, the width and height properties are applied to all parts of the div element: content area, padding, and borders.

Frequently Asked Questions

  1. Can margins have negative values?
    Ans:- Yes, margin values can be negative also.  While a positive value places it farther from its neighboring elements, a negative value places it closer to its neighboring elements.
     
  2. What is the use of CSS border-radius property?
    Ans:- The CSS border-radius property is used to define the radius of the element's corners.
     
  3. What is the overflow property?
    Ans:- When content is too big for the box, it is in an overflow state. In this case, the overflow property is used to specify whether to add scrollbars or clip the content so that the content fits in the box.
     
  4. What is the difference between intrinsic sizing and extrinsic sizing?
    Ans:- Extrinsic sizing means sizing elements with explicit values using width or height properties. In intrinsic sizing, the sizing of an element depends on its content size.
     
  5. What is the difference between min-content, max-content, and fit-content?
    Ans:- The max-content property determines a size assuming that there is infinite available space. 
    The min-content property defines an element's minimal possible size that does not lead to overflowing content. 
    In fit-content property, if there's enough space, it defines as much size as possible. Else it falls back to a minimum size that does not include overflowing elements.

Key Takeaways

This blog covers the concept of the CSS box model in detail, along with some frequently asked questions related to it. The different parts of the CSS box model: margin, border, padding, and content have also been discussed in this blog.

 

Frontend developers, if you are preparing for the next interview, check out the blogs 25 CSS Interview Questions For Beginners in 2021: Part 1 and 25 CSS Interview Questions for Experienced in 2021: Part 2. And if you are a beginner, check out the 10 Best HTML & CSS books for developers in 2021 to learn HTML and CSS from scratch.

 

We hope you found this blog useful. Feel free to let us know your thoughts in the comments section.

Was this article helpful ?
2 upvotes

Comments

No comments yet

Be the first to share what you think