CSS Paddings - RemoveLoad Educational Academy

In CSS, the padding property is used to generate space around an element’s content, inside of any defined borders.

Syntax

1. All four sides: Adds 10px padding to all sides.


padding: 10px;

container1

2. Vertical and Horizontal: Adds 10px padding to top and bottom, 20px to left and right


padding: 10px 20px;

container2

3. Top, Horizontal and Bottom:


padding: 10px 20px 30px;

container3

4. Top, Right, Bottom and Left: Adds 10px to top, 20px to right, 30px to bottom, 40px to left.


padding: 10px 20px 30px 40px;

container4

5. Individual sides padding: Adds 10px to top, 20px to right, 30px to bottom, 40px to left.


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

container5

Difference between Padding and Margin

Padding is the space between the content and the border of an element.

Margin is the space outside the border of an element.

Example:- Suppose you have a <div> element with some text, and you want to add padding around the text to make it look more spacious:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            padding: 20px;
            border: 1px solid #000;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="box">
        This is a box with padding.
    </div>
</body>
</html>

This is a box with padding.