CSS Padding Shorthand
➔ The padding property is a shorthand for following properties:
padding-toppadding-rightpadding-bottompadding-left
Syntax
padding: length | initial | inherit;
Property values
| Common Value | Description |
|---|---|
| length | CSS specifies a specific padding using units of length (e.g., px, em, rem, cm). Default value is 0. |
| percentage | Specifies the top padding as a percentage of the width of the containing block. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
padding: 20px 40px 60px 80px;
Here,top:20px.
right:40px.
bottom:60px.
left:80px.
top, right, bottom, left all are specified.
Click on the "Try it Now" button to see how it works.
padding: 20px 40px 60px;
Here,top:20px.
right:40px.
bottom:60px.
left:40px.
top, right, bottom are specified. so left value is copied from right value.
Click on the "Try it Now" button to see how it works.
padding: 20px 40px;
Here,top:20px.
right:40px.
bottom:20px.
left:40px.
top, right are specified. so bottom value is copied from top value and left value is copied from right value.
Click on the "Try it Now" button to see how it works.
padding: 20px;
Here,top:20px.
right:20px.
bottom:20px.
left:20px.
top is specified. so left, right, bottom values are copied from top value.
Click on the "Try it Now" button to see how it works.
Example (shorthand)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
section {
background-color: blue;
border: 1px solid #00f;
padding: 10px;
display: inline-block;
}
div {
background-color: green;
padding: 40px;
display: block;
}
img {
display:block;
}
</style>
</head>
<body>
<h3>CSS padding Example</h3>
<p>Padding is the space inside an element from its border.</p>
<p>Note: Here the blue element uses padding 10 pixels and the green element uses padding 40 pixels from their border.</p>
<section>
<div>
<img src="resources/images/fruits-apple.png" width="100">
</div>
</section>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.