CSS Margin


Go to main Page

Margin and Padding in CSS

CSS margin property is used to give space around the elements to a defined border or area.

Margin is very helpful in styling the web page.

The best thing about CSS is that we have full control over your elements

Same here we have full control on the margin property of an element.


Margin Properties for individual sides

  1. margin-top
  2. margin-bottom
  3. margin-left
  4. margin-right
Margin from top

margin-top is used to give a gap to an element from the top.

Margin from bottom

margin-bottom is used to give a gap to an element from the bottom

Margin from left.

margin-top is used to give a gap to an element from the left side.

Margin from top

margin-right is used to give a gap to an element from the right side.


Example


p{
    margin-left:200px;
    margin-right:150px;
    margin-top:20px;
    margin-bottom:300px;
}
  

Note:We can also use margin. The browser automatically sets the margin.


Margin Shortcut method

To shorten the code, it is possible to specify all the margin properties in one property.


margin: 20px 25px 90px 150px;

Explaination

Top margin is 20px.

Right margin is 25px.

Bottom margin is 90px.

Left margin is 150px.



What is Padding in CSS?

Padding is used to create space around an element's content, inside of any defined borders.

Padding Properties for individual sides

  1. padding-top
  2. padding-bottom
  3. padding-left
  4. padding-right
padding from top

padding-top is used to give a gap to an element from the top.

padding from bottom

padding-bottom is used to give a gap to an element from the bottom

padding from left.

padding-top is used to give a gap to an element from the left side.

padding from top

padding-right is used to give a gap to an element from the right side.


Example


p{
    padding-left:200px;
    padding-right:150px;
    padding-top:20px;
    padding-bottom:300px;
}
  

Note:We can also use padding. The browser automatically sets the margin.


Padding Shortcut method

To shorten the code, it is possible to specify all the padding properties in one property.


padding: 20px 25px 90px 150px;

Explaination

Top padding is 20px.

Right padding is 25px.

Bottom padding is 90px.

Left padding is 150px.