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
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
Contains styles, metadata and page setting
Step 4]
<style>
div {
border: 2px solid blue;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 80px;
padding-left:50px;
background-color: lightgrey;
color:brown;
}
</style>
border: 2px solid blue;
- Add blue border around <div>
- 2px - Thickness
- solid - border style
- blue - border color
- Padding properties
- Padding creates space inside element between content (text) and border
1) padding-top: 30px;
- Add 30pixels of space above content
- Push the text downward
- Creates Breathing space between text and top border
2) padding-bottom: 30px;
- Adds 30pixels of space below content.
- Push the bottom border away from the text
- space appears under the text
3) padding-right: 80px;
- Add 80pixels of space on the right side
- largest padding
- Extra Space on the right side of the text
4) padding-left:50px;
- Add 50Pixels of space on the left side.
- Pushes text towards the right
Step 6]
Closing tag
</body>
</html
CSS Padding Property Explained
Output
