The CSS padding
are used to give 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 like :
(top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
Note: Negative values are not allowed.
Set different padding for all four sides of a <div> element:
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-top
padding-right
padding-bottom
padding-left
So, here is how it works:
If the padding
property has four values:
Use the padding shorthand property with four values:
If the padding
property has three values:
Use the padding shorthand property with three values:
If the padding
property has two values:
Use the padding shorthand property with two values:
If the padding
property has one value:
padding: 25px;
Use the padding shorthand property with one value:
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
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):
Required fields are marked *
Get all latest content delivered to your email free.