Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS padding attributes

The padding property in CSS is used to create space inside an element, between the element's content and its border. You can set padding for all sides at once, or individually for each side.

Basic Usage

You can set the padding using the shorthand property or the individual properties:

1. Shorthand Property

Sets padding for all four sides (top, right, bottom, and left) in one declaration:

css

.element {
    padding: 10px; /* Equal padding on all sides */
    padding: 10px 20px; /* Vertical | Horizontal */
    padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}

2. Individual Properties

Allows you to set padding for each side separately:

css

.element {
    padding-top: 10px;    /* Top padding */
    padding-right: 20px;  /* Right padding */
    padding-bottom: 30px; /* Bottom padding */
    padding-left: 40px;   /* Left padding */
}

Examples

Here are a few examples to illustrate different padding scenarios:

Equal Padding on All Sides

css

.element {
    padding: 15px; /* 15 pixels padding on all sides */
}

Vertical and Horizontal Padding

css

.element {
    padding: 10px 20px; /* 10 pixels top and bottom, 20 pixels left and right */
}

Different Padding for Each Side

css

.element {
    padding: 5px 10px 15px 20px; /* 5 pixels top, 10 pixels right, 15 pixels bottom, 20 pixels left */
}

Individual Padding Properties

css

.element {
    padding-top: 5px;     /* 5 pixels top */
    padding-right: 10px;  /* 10 pixels right */
    padding-bottom: 15px; /* 15 pixels bottom */
    padding-left: 20px;   /* 20 pixels left */
}

Feel free to use these padding properties to fine-tune the spacing within your elements! Let me know if you need more details or examples.