CSS Margin and Padding

 
CSS Margin and Padding intro image

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>

                <style type="text/css">

                                body{

                                                background-color: #000000;

                                                display: flex;

                                                flex-direction: column;

                                                height: 500px;

                                }

                                div{

                                                margin: auto;

                                }

                                p{

                                                color: white;

                                }

                </style>

</head>

<body>

<div>

                <p>This is a Contaier</p>

</div>

</body>

</html>
Result
Result screen shot of above code



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>

                <style type="text/css">

                                body{

                                                background-color: #000000;

                                                display: flex;

                                                flex-direction: row;

                                                height: 500px;

                                }

                                div{

                                                width: 250px;

                                                height: 250px;

                                }

                                .div1{

                                                background-color: blue;

                                }

                                .div2{

                                                background-color: red;

                                }

                                p{

                                                color: white;

                                }

                </style>

</head>

<body>

<div class="div1">

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

</div>

<div class="div2">

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

</div>

</body>

</html>
Result
Result screen shot of above code



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:
Result Screen Shot of above code



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>

                <style type="text/css">

                                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;

                                }

                                p{

                                                font-family: "Ubuntu";

                                                font-size: 20px;

                                                color: white;

                                }

                </style>

</head>

<body>

<div class="div1">

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

</div>

<div class="div2">

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

</div>

</body>

</html>
Result
Result Screen Shot of Above code


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>

                <style type="text/css">

                                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;

                                }

                                p{

                                                font-family: "Ubuntu";

                                                font-size: 20px;

                                                color: white;

                                }

                </style>

</head>

<body>

<div class="div1">

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

</div>

<div class="div2">

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

</div>

</body>

</html>
Result
Result Screen Shot of above code


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.



Clear understanding of margin and padding

Below image will give you clear view and understanding of Margin and padding:


A clera understanding btw Margin and Padding


Hope you all clear about Margin and padding. If still you have any doubt or questions write us in comment section.
Read More:

Thank you

9 Comments