Padding and Margin in CSS

Padding and Margin in CSS. In this article we will learn how to create margin and padding.

Margin

Margin create and extend space outside the Element ( Object/ Box/ Shape etc), there are a few ways we can use margin by referring the table below.

No	Type of Margin	Description
1	margin-top	top
2	margin-bottom	bottom
3	margin-right	right
4	margin-left	left
5	margin:25px 50px 100px	Top Bottom Right Left

You can either use to define single location eg: Top , bottom , right , left. or define more than 1 location up to 4  in a single Margin command.

Padding

Padding create space within the Element inside and push out the configure padding value to the edges. There are a few ways we can use Padding refer the Table below.

No	Type of Margin	Description
1	padding-top	top
2	padding-bottom	bottom
3	padding-right	right
4	padding-left	left
5	padding:25px 50px 100px	Top Bottom Right Left

 

Refer the Code Below

CSS

Refering the code below , margin 50px is set to space out between two image
and a padding of 20px to extend the element within inside.
 

html{
    
    
    background-color: darkgrey;
}




img{
   max-width: 100%;
   height:auto;
   padding:20px;
    
    
}




.borderImage{
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border : 3px solid #ddde;
  padding : 20 ;
  opacity: 0.5;
  display: block;
  margin:50px;
  
}

 

Output

Check out HTML School here

Check out how to center image image here.