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:
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.
padding property is a shorthand property for the following individual padding properties:
So, here is how it works:
padding property has four values:
Use the padding shorthand property with four values:
padding property has three values:
Use the padding shorthand property with three values:
padding property has two values:
Use the padding shorthand property with two values:
padding property has one value:
Use the padding shorthand property with one value:
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.