CSS Padding
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).
Padding – Individual Sides
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:
- length – specifies padding in px, pt, cm, etc.
- % – specifies padding in % of the width of the containing element
- inherit – specifies that the padding should be inherited from the parent element.
CODE:
Result:
Padding – Shorthand Property
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:
CODE:
Result:
Likewise, we can also use the padding shorthand property with three values, two values, and one value.
Padding and Element Width:
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.
CODE:
Result:
Now, Using the box-sizing property to keep the width at 300px, no matter the amount of padding:
CODE:
Result:
The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
All CSS Padding Properties
You may also like: CSS Margins