Learning CSS - Box Model, Margin, Padding, Border, and Sizing
Every HTML element is a box. This episode dissects the four layers of the box model — content, padding, border, and margin — plus how to control box size. You'll understand why box-sizing border-box has become the modern standard.
#Introduction
Every element on a web page — a paragraph, image, or button — is essentially a box made of four layers: content (the contents), padding (inner space), border (the frame), and margin (outer spacing). This episode dissects all four layers, plus the sizing properties for controlling box dimensions. Most of those "elements don't line up" problems are rooted in a misunderstanding of the box model.
#Four Layers of the Box Model
#Anatomy of a Box
From the inside out: content (the element's contents), padding (space between content and border), border (the boundary line), and margin (spacing from other elements). All layers except margin count toward the element's visual size.
#Shorthand and Sides
.box {
padding: 16px;
margin: 20px;
}
.box-lain {
padding: 8px 16px;
margin: 10px 20px 30px 40px;
}
.kartu {
padding-top: 24px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 32px;
}One value applies to all sides, two values mean top-bottom then left-right, and four values follow clockwise order. Per-side properties like padding-top are useful when only one side needs spacing.
#Border
#Width, Style, and Color
A border needs three components:
.alert {
border: 2px solid #dc2626;
border-radius: 8px;
padding: 12px;
}
.card {
border-width: 1px;
border-style: solid;
border-color: #e5e7eb;
}The border shorthand sets width, style, and color at once; border-radius rounds the corners all the way to a full circle (50%).
#Single-Side Borders
.tab {
border-bottom: 3px solid #2563eb;
}
.sidebar {
border-left: 4px solid #f59e0b;
padding-left: 12px;
}Single-side borders are very common for active tabs and accent elements.
#Sizing: Controlling Box Size
The width and height properties set dimensions:
.column {
width: 300px;
height: 150px;
}
.half {
width: 50%;
}
.teks {
max-width: 70ch;
min-height: 200px;
}
.wadah {
width: 90%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}Percentage values are calculated relative to the parent's width; with content-box, width does not yet include padding and border. margin: auto on left and right splits the remaining space evenly.
#box-sizing and Its Impact
* {
box-sizing: border-box;
}
.kotak {
width: 200px;
padding: 20px;
border: 1px solid #000;
}The default content-box makes the visual size = width + padding + border, so 200px becomes 242px. With border-box, the value you write is the box's total size — which is why nearly all modern frameworks adopt it as an initial reset.
#Exercise: Two-Card Layout
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="kartu"><h2>Kartu</h2><p>Konten.</p></div>
<div class="kartu"><h2>Kartu</h2><p>Konten.</p></div>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
background-color: #f1f5f9;
padding: 32px;
}
.kartu {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
}Run npx serve . to see how border, padding, and margin shape the space around content.
#Common Mistakes and Solutions
Margin collapse: the vertical margins of two adjacent elements collapse into the larger one — use padding on the parent or add spacing to only one side.
Sizes off: it's almost certainly that box-sizing isn't border-box; add a universal reset at the top of the stylesheet.
Margin auto doesn't center: margin: auto only centers horizontally on block elements with a set width.
#Closing
Key takeaways:
- The box model consists of content, padding, border, and margin.
- The padding and margin shorthands follow one-, two-, or four-value patterns.
- A border needs width, style, and color;
border-radiusrounds the corners. max-widthandmin-heightmake sizes more flexible.margin-left: autoandmargin-right: autocenter block elements.box-sizing: border-boxis the modern standard for predictable sizes.
In the next episode, episode 5, we'll cover display, visibility, and basic positioning — how elements are shown and placed within a page. The block, inline, and position concepts are the bridge to the modern layout phase ahead.