Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
CSS Box Model
2.1.
Code
2.1.1.
HTML
2.1.2.
CSS 
2.1.3.
Output
3.
Margin
4.
Border
4.1.
Code
4.1.1.
HTML
4.1.2.
CSS 
5.
Padding
6.
Content
6.1.
Code
6.1.1.
HTML
6.1.2.
CSS
6.2.
Output
7.
Frequently Asked Questions
7.1.
What are the four components of the box model?
7.2.
Can margins have negative values?
7.3.
What is the use of CSS border-radius property?
7.4.
What is the overflow property?
7.5.
What is the difference between intrinsic and extrinsic sizing?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

CSS Box Model

Author Akshat Aggarwal
3 upvotes
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

CSS is used to design and present web pages. It enables us to create easy-to-use, visually appealing web pages. The fundamental concepts like the box model, position and display property, etc., are thus essential.

Introduction

 

We need to understand the box model, as it allows us to control the layout and positioning of elements on a page. We can create visually appealing web pages by manipulating the properties of each box.

This article will cover the CSS box Model concept in depth.

CSS Box Model

The CSS box model defines how elements are rendered on web pages by breaking them into rectangular boxes. Every webpage has different boxes that form its skeleton. The CSS box model deals with a box that wraps around every HTML element. CSS Boxes can either be blocks or inline. We use the display property in CSS to change the box type.

 

CSS box model consists of the following parts: 

  1. Margin
  2. Border
  3. Padding
  4. Actual content
CSS Box Model

CSS Box Model

 

Let us look at the box model for an element in HTML:

Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>

<body>
   <p>Sample Text</p>
</body>

</html>

CSS 

p {
   margin: 10px 40px;
   padding: 60px 40px;
   border: 2px solid red;
}

Output

Sample output

Example Output.

 

Output with box model marked

Example with the different layers of the box model highlighted.

 

Let's discuss each part in detail.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Margin

The margin is the space around an element outside its border. It is the space between a box and its surrounding boxes. We can apply margin to all four sides of an element - top, left, right and bottom. The margin does not necessarily affect the size of the box, but it affects how that element interacts with other elements. For example, a larger top margin can push an element down on the page, while a larger left margin can move it horizontally.

 

The values the margin property can have are as follows:

Value

Description

auto margin calculated by the browser 
inherit the margin value of the parent element is inherited
length specifies 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 define the margin of an element.

  • The below syntax sets the margin on all sides as 10px.
     
margin: 10px;
Margin - Syntax 1

 

  • The below syntax sets the top and bottom margins as 20px and the left and right margins as 40px.
     
margin: 20px 40px;
Margin - Syntax 2

 

  • The below syntax sets the top margin as 20px, the left and right margins as 40px, and the bottom margin as 60px.
     
margin: 20px 40px 60px;
Margin - Syntax 3

 

  • The below syntax sets the top margin as 20px, the right margin as 40px, the bottom margin as 60px, and the left margin as 80px.
     
margin: 20px 40px 60px 80px;
Margin - Syntax 4

 

  • The below syntax sets the margin on each side separately.
     
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
Margin - Syntax 5

Border

The border is the line that surrounds an element’s content and padding. Every element has a border assigned to it, but most elements do not show it by default. Like margins, We can set borders to the element's top, bottom, left, and right. The CSS border properties specify an element's border's style, width, and colour. The border can create many things, such as boxes, buttons and dividers.

 

The syntax for setting border:
 

border: 5px dashed black;
border

A 5 px thick black dashed border

Let us look at the code for the above example:

Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>

<body>
   <p class="border">Border</p>
</body>

</html>

CSS 

.border {
   background-color: red;
   color: white;
   display: flex;
   justify-content: center;
   font-size: x-large;
   width: 30%;
   border: 5px dashed black;
}

 

We can also set the border properties individually using the following properties:-

Border property

Description

border-width sets border width with values in px, ems, etc.
border-style sets border styles with values as dotted, solid, dashed, etc.
border-color sets the colour of the border

 

Padding

The padding is the space around an element's content within the defined borders. We can also apply padding to all four sides of an element, just like the margin property. The rules to describe them are also similar to the margin property. 

Let's look at the various ways to define the padding of an element.

  • The below syntax sets the padding on all sides as 10px.
     
padding: 10px;
Padding - Syntax 1

 

  • The below syntax sets the top and bottom padding as 20px and the left and right padding as 40px.
     
padding: 20px 40px;
Padding - Syntax 2

 

  • The below syntax sets the top padding as 20px, the left and right padding as 40px, and the bottom padding as 60px.
     
padding: 20px 40px 60px;
Padding - Syntax 3

 

  • The below syntax sets the top padding as 20px, the right padding as 40px, the bottom padding as 60px, and the left padding as 80px.
     
padding: 20px 40px 60px 80px;
Padding - Syntax 4

 

  • The below syntax sets the padding on each side separately.
     
padding-top: 20px;
padding-right: 40px;
padding-bottom: 60px;
padding-left: 80px;
Padding - Syntax 5

Content

The box's content, where text and images appear, is called the content area. It is the innermost layer of an element’s layout, surrounded by the padding, border and margin. The content layer is the primary reason for the existence of an element, and the other three layers enhance its appearance.

The CSS width and height properties control the dimensions of the content area. 

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. 
 

Box width = left padding + right padding + left border + right border + left margin + right margin + width.
Box 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.
 

Box height = top padding + bottom padding + top border + bottom border + top margin + bottom margin + height.
Box 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

initial It sets the box-sizing property to its default value.
inherit It inherits the box-sizing property from its parent element.
content-box The width and height properties include only the content area, i.e., don’t include the border and padding.
border-box The width and height properties include only the content area, border, and padding.

Let’s look at an example to understand the difference between box-sizing values.

Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>

<body>
   <div class="contentBox">
       content-box
   </div>
   <div class="borderBox">
       border-box
   </div>
</body>

</html>

CSS

div {
   margin: 20px;
   border: 2px solid black;
   padding: 15px;
   width: 100px;
   height: 100px;
   background-color: red;
   color: white;
}

.contentBox {
   box-sizing: content-box;
}

.borderBox {
   box-sizing: border-box;
}

Output

Output showing different box-sizing

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

Check this out:  Versions of CSS

Frequently Asked Questions

What are the four components of the box model?

The box model has four main areas: margin, border, padding and the actual content.

Can margins have negative values?

Yes, margin values can be negative. While a positive value places it farther from its neighbouring elements, a negative value puts it closer to its adjacent elements. We can use negative margins to overlap elements.

What is the use of CSS border-radius property?

We use the CSS border-radius property to make an element’s corners round. We can use this property to define the radius of an element's corners individually or for all corners together.

What is the overflow property?

When content is too big for the box, it is overflowing. The overflow property specifies whether to add scrollbars or clip the content to fit it in the box. The overflow property can have four values: visible, hidden, scroll, and auto.

What is the difference between intrinsic and extrinsic sizing?

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.

Conclusion

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

If you are preparing for an interview, frontend developers, check out the following article: 25 CSS Interview Questions.

And if you are a beginner, check out the 10 Best HTML & CSS books for developers to learn HTML and CSS from scratch.

We hope you found this blog helpful! Please let us know your thoughts in the comments section.

Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass