CSS Tutorial

CSS Padding

The CSS padding property is used to create space inside an element, between its content and its border. It helps in controlling the layout and improving the design of a webpage. Padding can be applied on all four sides of an element or individually on each side.

Key Points on CSS Padding:

The padding shorthand property is used to set padding for all four sides of an element in one declaration.
Padding can be set individually for the top, right, bottom, and left sides using padding-top, padding-right, padding-bottom, and padding-left.
Padding increases the space inside the element, which affects its overall size (width and height).
Padding is often used to ensure that the content within an element does not touch its edges, providing better readability.
The values for padding can be set using pixels, percentages, or em units.
Padding is not the same as margin. Margin is the space outside the element, whereas padding is the space inside.

Syntax for CSS Padding:

Syntax Example

/* Padding shorthand syntax */
        padding: top right bottom left;
        
        /* Example */
        padding: 20px 30px 10px 40px;

Examples of CSS Padding:

The following examples demonstrate the usage of different padding properties:

Code Example: Padding for All Sides

div {
            padding: 20px;
        }

Output

This div has padding of 20px on all sides.

Code Example: Individual Padding

div {
            padding-top: 10px;
            padding-right: 30px;
            padding-bottom: 20px;
            padding-left: 40px;
        }

Output

This div has different padding for each side.

Common Padding Properties:

padding: A shorthand property for setting the padding on all four sides in one declaration.
padding-top: Sets the padding for the top side of an element.
padding-right: Sets the padding for the right side of an element.
padding-bottom: Sets the padding for the bottom side of an element.
padding-left: Sets the padding for the left side of an element.

Padding can greatly enhance the layout and design of a webpage. By adjusting padding, you can control the spacing around your content, making it more readable and visually appealing.