CSS Padding ~ DevJunctionPoint

CSS works on a box model structure, where elements are packed according to the sequence of the image
The padding property defines the space between the element and the border
The background color isn’t affected in the case of padding
You can also add padding individually to each corner: Top, Bottom, Left and Right.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <h1>padding Property</h1>
    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: lightblue;
}

div {
    width: 300px;
    margin: auto;
    border: 2px solid red;
}

div h1 {
    padding: 30px 20px;
    background-color: brown;
}