CSS Margin and Padding

CSS Margin and Padding

Hello Friends,

Here I am with my new article about Margin and padding.

CSS allows us to set margin to document or element as well as we can set padding too. CSS margin and padding both are very commonly and importantly usable property while design a webpage.

Important note:

Margin is use for the outside spacing of an HTML element from other element.
Padding is use for the spacing of the inside content from the perimeters of the element.
Margin and padding are invisible space not using any colors.

CSS Margin Property:

As we discussed above, margin property is important and commonly use property for webpage design. The margin property gives an invisible border around an element. This property is very useful to avoid overlapping and overcrowding of elements.

You can add margin to whole element or by their side using different margin properties. Margin properties are:

margin-left
margin-right
margin-top
margin-bottom

all margin properties having the following values:

auto - the browser calculates the margin by his own.
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element

Let’s understand about margin from below few example:

Code-1

<!DOCTYPE html>

<html>

<head>

<title>CSS Margin and Padding</title>

body{

background-color: #000000;

display: flex;

flex-direction: column;

height: 500px;

}

div{

margin: auto;

}

color: white;

}

</style>

</head>

<body>

<div>

<p>This is a Contaier</p>

</div>

</body>

</html>

Result

As we can see that we took a div in a document and set margin of div as “auto”, resultant browser automatic decide to place the div equally from top, bottom, left and right. So we got our element at center of the page.

Code-2

<!DOCTYPE html>

<html>

<head>

<title>CSS Margin and Padding</title>

body{

background-color: #000000;

display: flex;

flex-direction: row;

height: 500px;

}

div{

width: 250px;

height: 250px;

}

.div1{

background-color: blue;

}

.div2{

background-color: red;

}

color: white;

}

</style>

</head>

<body>

<p>This is a Contaier 1</p>

</div>

<p>This is a Contaier 2</p>

</div>

</body>

</html>

Result

Add margin to red colored code:

div{

width: 250px;

height: 250px;

margin: 20px;

}

When we add margin 20px to red colored code we will get:

We can see the div get space of 20px from all sides in the document.

Code-3

<!DOCTYPE html>

<html>

<head>

<title>CSS Margin and Padding</title>

body{

background-color: #000000;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

height: 500px;

}

div{

width: 250px;

height: 250px;

}

.div1{

background-color: blue;

margin-bottom: 100px;

margin-right: 20px;

}

.div2{

background-color: red;

margin-left: 20px;

margin-top: 100px;

}

font-family: "Ubuntu";

font-size: 20px;

color: white;

}

</style>

</head>

<body>

<p>This is a Contaier 1</p>

</div>

<p>This is a Contaier 2</p>

</div>

</body>

</html>

Result

In above code we have applied margin-left and margin-top property to container 2 div elements and margin-bottom and margin-right to container 1 div element.

Hope now you understood about the margin clearly.

CSS Padding Property:

As we discussed above, padding property is also very important and commonly use property for webpage design. The padding property gives an invisible border inside and element. This property also uses to avoid overlapping and overcrowding of elements from inside.

You can add padding to whole element or by their sides using different padding properties. Padding properties are:

padding-left
padding-right
padding-top
padding-bottom

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

Let’s check out some code example to understand well about padding.

Code

<!DOCTYPE html>

<html>

<head>

<title>CSS Margin and Padding</title>

body{

background-color: #000000;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

height: 500px;

}

div{

width: 250px;

height: 250px;

margin: auto;

}

.div1{

background-color: blue;

padding: 10px;

}

.div2{

background-color: red;

padding-left: 5px;

padding-right: 10px;

padding-top: 20px;

padding-bottom: 15px;

}

font-family: "Ubuntu";

font-size: 20px;

color: white;

}

</style>

</head>

<body>

<p>This is a Contaier 1</p>

</div>

<p>This is a Contaier 2</p>

</div>

</body>

</html>

Result

Here in first container we took overall padding as 10px so it take space 10px from top, bottom, left and right.

In second container we use different properties of padding as padding-left, padding-right, padding-top and padding-bottom.

Try yourself and see the magic.

Difference between Margin and Padding

Margin	Padding
Margin Space around the element from outer.	Padding space around the element from inside
You can set the value of your margin as auto	You can’t set your padding auto
Margin can be set the space between two elements borders.	Padding is setting up under each element to make difference between element border and content inside that element.