CSS Padding Side
CSS
Define the space between the element content and element boundary in any direction.
CSS Padding
➔ Padding can be set on each side of an element.
➔ The following properties specify the padding for each side of an element.
padding-toppadding-rightpadding-bottompadding-left
CSS padding-top property
➔ The CSS padding-top property sets the height of the padding area above an element.
➔ This creates space between the element's content and its top border.
Syntax
padding-top: 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. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding-top 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-top: 10px;
display: inline-block;
}
div {
background-color: green;
padding-top: 40px;
display: block;
}
img {
display:block;
}
</style>
</head>
<body>
<h3>CSS padding-top Example</h3>
<p>Padding-top is the space inside an element from its top border.</p>
<p>Note: Here the blue element uses padding-top 10 pixels and the green element uses padding-top 40 pixels from their right 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.
Example
.p1 {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}Click on the "Try it Now" button to see how it works.
CSS padding-right property
➔ The CSS padding-right property sets the space between an element's content and its right border.
➔ This creates buffer space between the element's content and its right border.
Syntax
padding-right: 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. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding-right 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-right: 10px;
display: inline-block;
}
div {
background-color: green;
padding-right: 40px;
display: block;
}
img {
display:block;
}
</style>
</head>
<body>
<h3>CSS padding-right Example</h3>
<p>Padding-right is the space inside an element from its right border.</p>
<p>Note: Here the blue element uses padding-right 10 pixels and the green element uses padding-right 40 pixels from their right 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.
Example
button {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}Click on the "Try it Now" button to see how it works.
CSS padding-bottom property
➔ The CSS padding-bottom property sets the space between an element's content and its bottom border.
➔ This creates buffer space between the element's content and its bottom border.
Syntax
padding-bottom: 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. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding-bottom 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-bottom: 10px;
display: inline-block;
}
div {
background-color: green;
padding-bottom: 40px;
display: block;
}
img {
display:block;
}
</style>
</head>
<body>
<h3>CSS padding-bottom Example</h3>
<p>Padding-bottom is the space inside an element from its bottom border.</p>
<p>Note: Here the blue element uses padding-bottom 10 pixels and the green element uses padding-bottom 40 pixels from their bottom 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.
CSS padding-left property
➔ The CSS padding-left property sets the space between an element's content and its left border.
➔ This creates buffer space between the element's content and its left border.
Syntax
padding-left: 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 0px. |
| 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. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding-left 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-left: 10px;
display: inline-block;
}
div {
background-color: green;
padding-left: 40px;
display: block;
}
img {
display:block;
}
</style>
</head>
<body>
<h3>CSS padding-left Example</h3>
<p>Padding-left is the space inside an element from its left border.</p>
<p>Note: Here the blue element uses padding-left 10 pixels and the green element uses padding-left 40 pixels from their left 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.
Example (top,right,bottom,left)
<!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-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
display: inline-block;
}
div {
background-color: green;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 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.