BKPanda CSS Box Model – Full Explanation
CSS Box Model ? The Box Model is the foundation of CSS layout. Every HTML element is
represented as a rectangular box made up of four parts:
┌──────────────────────────────┐ ← margin (outermost)
│ ┌──────────────────────────┐│ ← border
│ │ ┌────────────────────┐ ││ ← padding
│ │ │ content │ ││ ← content (innermost)
│ │ └────────────────────┘ ││
│ └──────────────────────────┘│
└──────────────────────────────┘
1. Content: The innermost box that holds the actual element data like text, images, or other media.
Properties:
width, height → define the size of the content area.
min-width, max-width, min-height, max-height.
overflow → controls what happens if content is too big.
Example:
div {
width: 200px;
height: 100px;
}
This means the content area is exactly 200×100 pixels (before adding padding, border, or margin).
2. Padding: The space between the content and the border. It creates breathing room inside the box.
Properties:
padding-top, padding-right, padding-bottom, padding-left.
Shorthand: padding: 10px 20px; (top/bottom = 10px, left/right = 20px).
Effect: Increases the element’s rendered size (unless box-sizing: border-box).
Example:
div {
padding: 20px;
}
This adds 20px space inside the box, so text doesn’t touch the border.
3. Border: The line that wraps around the content and padding.
Properties:
border-width, border-style, border-color.
Shorthand: border: 5px solid red; (width + style + color)
Width: thin, medium, thick, 5px Style: solid, dashed, dotted, double, groove, ridge,
inset, outset, none, hidden Color: red, #333, rgba()
Extras: border-radius (rounded corners), border-image.
Effect: Also increases element’s size unless using border-box.
Example:
div {
border: 5px solid green;
border-radius: 10px;
}
This adds a green border of 5px around the element.
4. Margin: The space outside the border. It separates the element from neighboring elements.
Properties:
o margin-top, margin-right, margin-bottom, margin-left.
o Shorthand: margin: 10px 20px; (top/bottom = 10px, left/right = 20px).
o Effect: Does not affect the element’s own size; affects spacing in layout.
o Special case: Margin collapsing occurs in vertical margins of block elements.
Example:
div {
margin: 15px;
}
This pushes the element 15px away from surrounding elements.
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px; /* content width */
height: 100px; /* content height */
padding: 20px; /* inside spacing */
border: 5px solid blue;/* border */
margin: 15px; /* outside spacing */
background: lightyellow;
}
</style>
</head>
<body>
<div class="box">Hello World</div>
</body>
</html>
Rendered Calculation
Content area: 200 × 100 px
Padding: +20px (all sides) → new inner size = 240 × 140 px
Border: +5px → new size = 250 × 150 px
Margin: +15px outside → element sits 15px away from neighbors
So, total occupied space horizontally = 200 + (20+20) + (5+5) + (15+15) = 280px
Comparison
Part Position Purpose Affects size? Example
Content Innermost Holds text/image ✅ yes width:200px
Between content &
Padding Inner spacing ✅ yes padding:20px
border
Wraps padding & border:5px solid
Border Decorative edge ✅ yes red
content
Gap between ❌ element’s own size, but margin:15px
Margin Outermost
elements affects layout
CSS Units Cheat sheet
1. Introduction: In CSS, measurement units are used to specify the size and spacing of elements
(width, height, margin, padding, font-size, etc.).
Types of CSS Units: Measurements can be
1. absolute (fixed, do not change with screen)
2. relative (depend on parent element, viewport, or user settings).
3. Special Values
Absolute: Absolute units are fixed and not responsive
Unit Meaning Equivalent Example
px Pixel 1/96 inch p { font-size: 16px; } /* 16 pixels tall */
in Inch 1 in = 96 px div { width: 2in; } /* width = 192px */
cm Centimeter 1 cm ≈ 37.8 px h1 { margin-left: 1cm; }
mm Millimeter 10 mm = 1 cm p { letter-spacing: 5mm; } /* ~19px gap */
1 pt = 1/72 in h2 { font-size: 12pt; } /* ~16px */
pt Point
(≈1.33px)
pc Pica 1 pc = 12 pt = 1/6 in div { width: 2pc; } /* 24pt = 32px */
Relative Units :Relative units adapt to parent, root, or viewport
Unit
Relative To Example
font related
font-size: 1.5em; /* 1.5 × parent font-
em Parent element’s font size size */
rem Root element’s font size font-size: 2rem; /* 2 × html font-size */
Height of lowercase “x” in font-size: 2ex;
ex
font
Width of “0” character in width: 30ch; /* ~30 characters wide */
ch
the font
Unit Relative To Example
Viewport related
vw 1% of viewport width width: 50vw; /* 50% screen width */
vh 1% of viewport height height: 100vh; /* full height */
vmin Smaller of vw or vh font-size: 5vmin;
vmax Larger of vw or vh font-size: 5vmax;
% Relative to parent’s size .container { width: 80%; }
Spl type: intrinsic sizing keywords
Keyword Description Example
Browser automatically decides the
div { width: auto; } /* width adjusts
auto size (default behavior). Often depends based on content/parent */
on content or parent.
Shrinks element to the smallest size p { width: min-content; } /* text
min- breaks into narrowest width possible
that still fits its content without
content */
overflowing.
p { width: max-content; } /* makes
max- Expands element to the largest size element as wide as the longest
content needed to fit content on a single line. word/line */
Picks the best size between min-
fit- div { width: fit-content(300px); } /*
content and max-content (respects max 300px, but shrinks if needed */
content
container space).
