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: