Lesson 3: The Resilient CSS Box Model & box-sizing

Every element rendered on a webpage is a rectangular box comprising four concentric layers:

Content: The text, image, or child nodes inside the element.

Padding: Transparent inner spacing between the content and the border.

Border: The stroke outline wrapping the padding and content.

Margin: Transparent outer spacing pushing neighboring element boxes away.

⊞HTML5 Web Code (index.html)

<!DOCTYPE html>

<head>

<title>CSS Box Model Demo</title>

<style>

/* Universal Box Sizing Reset */

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: #17181c;

color: #ffffff;

font-family: Arial, sans-serif;

padding: 30px;

}

.box-card {

width: 320px;

padding: 24px;

border: 2px solid #04AA6D;

margin: 20px auto;

background-color: #1f2029;

border-radius: 12px;

text-align: center;

}

</style>

</head>

<body>

<h3>Standard Box Model</h3>

<p>Padding: 24px | Border: 2px | Margin: 20px auto</p>

</div>

</body>

</html>

When declaring padding or margin, values follow standard Top → Right → Bottom → Left (TRBL) clockwise order:

4 Values: padding: 10px 20px 15px 5px; (Top, Right, Bottom, Left)

2 Values: padding: 10px 20px; (Top/Bottom, Left/Right)

1 Value: padding: 16px; (All 4 sides identical)