HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Padding is used to create space around an element's content, inside of any defined borders
The CSS padding properties are used to generate space around
an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-leftAll the padding properties can have the following values:
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual
padding properties:
padding-toppadding-rightpadding-bottompadding-leftSo, here is how it works:
If the padding property has four values:
Use the padding shorthand property with four values:
div {
padding: 25px 50px 75px 100px;
}
If the padding property has three values:
Use the padding shorthand property with three values:
div {
padding: 25px 50px 75px;
}
If the padding property has two values:
Use the padding shorthand property with two values:
div {
padding: 25px 50px;
}
If the padding property has one value:
Use the padding shorthand property with one value:
div {
padding: 25px;
}
The CSS width property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an element
(the box model).
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
To keep the width at 300px, no matter the amount of padding, you can use the
box-sizing property. This causes the element to maintain its actual width; if
you increase the padding, the available content space will decrease.
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Set the top padding of the <h1> element to 30 pixels.
<style>
h1 {
: 30px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |