CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

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 is the space between an element's content and its border.

It adds inner space around the content inside the border of an element, which helps control layout and improve readability.

Padding can be applied uniformly on all sides or individually to each side (top, right, bottom, and left).

Padding affects the element’s total width and height only if the box-sizing property is set to content-box.

If box-sizing is set to border-box, padding is included in the element’s width and height, which is often preferred for layout consistency.

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 a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Example:
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 100px;
padding-left: 20px;
}

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:

• padding-top
• padding-right
• padding-bottom
• padding-left

Example:
div {
padding: 15px 10px 15px 90px;
}

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.

Example:
div {
width: 300px;
padding: 25px;
}

Key points of CSS Padding

1. Creates Inner Space:

Padding adds space inside an element, between its content and its border, improving readability and layout clarity.

2. Independent Side Control:

Padding can be set individually for each side—top, right, bottom, and left—or as a uniform value for all sides.

3. Shorthand Syntax:

CSS offers a shorthand for padding. For example, padding: 10px 20px 15px 5px; applies padding in the order of top, right, bottom, and left.

4. Responsive Control:

Padding can be defined in various units, including px, %, em, and rem, allowing flexible, responsive designs.

5. Affects Total Size:

By default, padding increases an element’s overall dimensions when box-sizing is set to content-box. Setting box-sizing: border-box; includes padding within the element’s defined width and height.

6. Zero Padding by Default:

If not specified, padding defaults to 0, meaning no extra space around content.

7. Compatibility:

CSS padding works across all HTML elements and is supported by all major browsers, making it a consistent layout tool.