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:
<!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:
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:
