CSS Paddings

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.

CSS Paddings – Interview Questions

Q 1: What is padding in CSS?

Ans: Padding is the space between content and border.

Q 2: Difference between margin and padding?

Ans: Margin is outside the border; padding is inside.

Q 3: Can padding be applied to all sides?

Ans: Yes, top, right, bottom, and left.

Q 4: Does padding affect element size?

Ans: Yes, unless box-sizing: border-box is used.

Q 5: What units are used for padding?

Ans: px, %, em, rem.