Padding

Part of the Styling with CSS section of Coddy's HTML journey — lesson 34 of 76.

In CSS, padding is the space between the content of an element and its border. Padding is used to create visual breathing room around the content, making it more readable and visually appealing. You can control the padding on all four sides of an element (top, right, bottom, and left) independently or using shorthand notation.

Here's the basic syntax for using the padding property:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: The padding on the top side of the element.
padding-right: The padding on the right side of the element.
padding-bottom: The padding on the bottom side of the element.

padding-left: The padding on the left side of the element.
value: The desired padding value, which can be specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

You can also use shorthand notation to set the padding for all four sides at once, for example:

p {
    padding: 20px; /* Applies the same padding to all four sides */
}

div {
    padding: 10px 25px; /* Sets top and bottom padding to 10px, and left and right padding to 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Sets padding for each side individually */
}

In this example, all <p> (paragraph) elements have a padding of 20px on all sides, all <div> elements have a top and bottom padding of 10px and a left and right padding of 25px, and all elements with the class button have a top padding of 15px, a right padding of 30px, a bottom padding of 10px, and a left padding of 5px.

Challenge

Easy

You are given an HTML document with two headings. Your task is to use the padding property to add spacing around the content of these elements. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the padding to 20px on all sides.
Write a CSS rule that targets the <h2> element. Set the top and bottom padding to 10px and the left and right padding to 30px.

Cheat sheet

CSS padding creates space between an element's content and its border.

Individual padding properties:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

Shorthand notation:

/* Same padding on all sides */
padding: 20px;

/* Top/bottom: 10px, Left/right: 25px */
padding: 10px 25px;

/* Top, Right, Bottom, Left individually */
padding: 15px 30px 10px 5px;

Values can be specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

Try it yourself

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>