/    /  Margin vs Padding

Margin vs Padding

 

Margin :

 

  • Margin is said to be the outer space of an element, i.e., the margin is the space outside of the element’s border.
  • We can set the margin to auto.
  • It can be negative or any float number.
  • Styling of an element such as background color does not affect the margin.

 

Padding:

 

  • Padding is said to be the inner space of an element, i.e., the padding is the space inside of the element’s border.
  • We cannot set the padding to auto.
  • It does not allow negative values.
  • Padding is affected by the styling(CSS) of an element, such as background color.

 

Margin vs Padding

 

Margin:

 

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: gray;
font-size: 20px;
border: 3px solid red;
color:white;
}
p.margin {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is displayed without specified margin. </p>
<p class = "margin">This paragraph is displayed with specified margin.<br>
margin: 50px 100px 150px 200px;
</p>
</body>
</html>

 

OUTPUT:

 

Margin vs Padding

 

 Padding:

 

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightskyblue;
font-size: 20px;
border: 3px solid red;
}
p.padding {
padding: 100px 100px 150px 50px;
}
</style>
</head>
<body>
<p>This paragraph is displayed without specified padding. </p>
<p class = "padding">This paragraph is displayed with specified padding.<br>
<b>padding: 100px 100px 150px 50px; </b>
</p>
</body>
</html>

 

OUTPUT:

 

Margin vs Padding