CSS Padding Property Explained
This Blog You Will Learn
ஃWhat is Padding in CSS
ஃ Advantages of CSS Padding Property
ஃ Real -World Use
ஃ Why Use Padding
ஃ Syntax
ஃCSS Padding Property Example
ஃExplain Program
ஃ Output
What is Padding in CSS
Padding is css property creates space inside an element between the content and border
Advantages of CSS Padding Property
✅ Improves Readability
✅Enhances User Interface
✅Better User Experience(UX)
✅Prevents Content Overlap
✅Flexible Layout Control
- one Side
- Two side
- All four sides
✅Works With All HTML elements
- div
- P
- button
- a
- input
- section
Real -World Use
- Buttons (padding:10px 20px)
- Cards and boxes
- Navigation menus
- Forms and input fields
Why Use Padding
- Improves readability
- Creates Space around text
- Makes buttons,cards, and boxes look better
- prevents text from touching borders.
Syntax
selector
{
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
CSS Padding Explained
1) one Value
padding: 20px;
- All Sides =20px
2) Two Values
padding:20px 30px;
- Top And Bottom =20px
- Left And Right = 30px
3) Three Values
padding: 20px 30px 40px;
- Top =10px
- Left& Right =20px
- Bottom =30px
4) Four Values
padding: 10px 20px 30px 40px;
- top→Right→Bottom→Left
CSS Padding Property Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 80px;
padding-left:50px;
background-color: lightgrey;
color:brown;
}
</style>
</head>
<body>
<h2> CSS Padding Properties </h2>
<div>Padding is a CSS property that controls
the space inside an element,
between the content and the border.</div>
</body>
</html>
CSS Padding Property Explained
