- What is Margin?
- What is Padding?
- Examples
1. What is Margin?
>> Margin is space outside an element. This creates distance between elements.
[Element A]
<Margin-Top>
[Element B] <Margin-Left> [Element C] <Margin-Right> [Element 3]
<Margin-Bottom>
[Element D]
>> Margin pushes elements away from each other.
2. What is Padding?
>> Padding is space inside an element. This creates space between content and border.
| <Padding-Top> <Padding-Left> Content <Padding-Right> <Padding-Bottom> |
>> Padding increases element size.
3. Examples
padding: 0px
margin: 0px
padding: 8px
margin: 8px
padding: 16px
margin: 16px
| padding: 8px, margin: 8px |
>> Understanding the different between margin and padding is a small but important step in mastering web styling. Once you know how to control spacing inside and outside elements, creating clean and well-structured layouts becomes much easier. Keep experimenting and have fun with it!
>> Ready to review? Get premium access and take the quiz!
Unlock premium features to get access
Read more of this content when you subscribe to premium features today.
Leave a comment