How to use margin, border and padding to fit together in the box model ?

Last Updated : 16 Nov, 2021

In this article, we will learn how the different parts of the box i.e., margin, border, padding & content fits together to create the box. The box model specifies how the HTML elements are organized & modeled in the browser engine along with deriving the CSS properties that define the dimension for the HTML elements. The box model can be described as a rectangular box that is generated for the HTML elements which forms a document tree. The box model has 4 main properties – margin, border, padding & content, which help to create the design and determine the layout of web pages. These properties can be given as:

content: This is one of the main part of the box model that contains text, images, videos, links, etc, which can be resized using the height and width property.
padding: It is the property used to create space around the content inside the bordered region.
border: It covers the area under content, including the padding around the content.
margin: This property refers to creating space around the element ie., around the border area.

A simple box model contains a content, border, and the external space outside the border the box requires. This external space is given by margin, which separates the box from other boxes. When we create a box container, we can specify the distance between the border and inside content, which is given by padding. The width and color of the border can be given by the border attribute.

Example: This example describes the basics of the Box model in CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Box</title> 
    <style> 
        .box { 
            background-color: rgb(233, 141, 20); 
            margin-top: 80px; 
            margin-left: 5rem; 
            width: 20rem; 
            color: blueviolet; 
            text-align: center; 
            font-size: 50px; 
            border: 7px solid red; 
            padding: 6rem; 
        } 
  
        body { 
            background-color: yellow; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="box"> 
        Welcome to GeeksforGeeks 
    </div> 
</body> 
  
</html> 

Output:

CSS Box model

Consider the below code example for setting the width & height property of an element:

.box {
  margin: 100px 20px 50px 370px;
  width: 350px;
  height: 50px;
  font-size: 50px;
  border: 10px solid red;
  padding: 160px;
}

The total height and width of the box can be found after adding the following properties as:

Box width = width + (left padding + right padding) + (left border + right border) + (left margin + right margin)

Box height = height + (top padding + bottom padding) + (top border + bottom border) + (top margin + bottom margin)

Thus, Total width = 350+(160+160)+(10+10)+(370+20) = 1080px

and Total height = 50+(160+160)+(10+10)+(100+50) = 540px

Padding property: CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.

Syntax:

padding: "padding-top|padding-right|padding-bottom|padding-left";

It consists of 4 components:

padding-top: Specifies padding width in the box above the content
padding-right: Specifies padding width in the box at the right of the content
padding-bottom: Specifies padding width in the box below the content
padding-left: Specifies padding width in the box at the left of the content

Example:

padding: 20px 30px 50px 70px;

We can also write

padding: 40px;

This sets default padding of 40px on all four directions inside the box.

Border property: It is a combination of three properties.

Syntax:

border : "width style color | initial | inherit";

Property values:

width: This specifies the thickness of the border
style: This specifies the outlook of the border, be it solid, dashed, dotted, double, groove, inset, etc.
color: This specifies the color of the border

The default value is initial.

Example:

border: 10px solid red;

Margin property: It has four individual margin properties:

Syntax:

margin: "top-margin right-margin bottom-margin left-margin";

top-margin: Specifies margin width at the top of the box
right-margin: Specifies margin width at the right of the box
bottom-margin: Specifies margin width at bottom of the box
left-margin: Specifies margin width at the left of the box

We can write individually or in a single line.

Example:

margin: 100px 20px 50px 370px;

If we write

margin: 20px;

It sets a default margin of 20px on all 4 sides of the reference object

We can understand the box model from the following examples:

Example 1: This example describes the Padding and Border properties.

HTML

<!DOCTYPE html> 
  
<head> 
    <title>Padding</title> 
    <style> 
    .main { 
        font-size: 38px; 
        font-weight: bold; 
        Text-align: center; 
    } 
      
    .box { 
        margin-left: 500px; 
        border: 50px solid #059900; 
        width: 300px; 
        height: 200px; 
        text-align: center; 
        padding: 50px; 
      
    } 
      
    .box1 { 
        font-size: 42px; 
        font-weight: bold; 
        color: #000000; 
        margin-top: 60px; 
        background-color: #d9c5db; 
    } 
    </style> 
</head> 
  
<body> 
    <div class="main">CSS Padding and Border</div> 
    <div class="box"> 
        <div class="box1">GeeksforGeeks</div> 
    </div> 
</body> 
  
</html>

Output:

Green Border and white padding around the content area

Example 2: The following code illustrates the Margin property of the box model.

HTML

<!DOCTYPE html> 
  
<head> 
    <title>Padding</title> 
    <style> 
    .main { 
        font-size: 38px; 
        font-weight: bold; 
        Text-align: center; 
    } 
      
    .box { 
        margin-left: 500px; 
        border: 50px solid #059900; 
        width: 300px; 
        height: 200px; 
        text-align: center; 
        padding: 50px; 
        margin-top: 180px;     
    } 
      
    .box1 { 
        font-size: 42px; 
        font-weight: bold; 
        color: #000000; 
        margin-top: 60px; 
    } 
    </style> 
</head> 
  
<body> 
    <div class="main">CSS Margin Property</div> 
    <div class="box"> 
        <div class="box1">GeeksforGeeks</div> 
    </div> 
</body> 
  
</html>