What is padding?

Padding is the space between the content of an element and its border. It is used to create space inside an element, making the content more visually appealing and easier to read. Padding can be set using CSS properties, and it can be defined for all sides (top, right, bottom, left) or individually.

Here’s an example of how to use padding in CSS:

.box {
    padding: 20px; /* Applies 20px padding on all sides */
    border: 1px solid #000; /* Border around the box */
    background-color: #f0f0f0; /* Background color */
}

You can also specify different padding values for each side:

.box {
    padding: 10px 15px 20px 25px; /* top right bottom left */
}

In this example, the padding is set to 10px on the top, 15px on the right, 20px on the bottom, and 25px on the left.