Every element in CSS is a rectangular box. Understanding the box model is fundamental to CSS layout.
Box Model Components#
1/* The complete box model */
2.box {
3 /* Content - where text/images appear */
4 width: 200px;
5 height: 100px;
6
7 /* Padding - space inside the border */
8 padding: 20px;
9
10 /* Border - surrounds the padding */
11 border: 2px solid black;
12
13 /* Margin - space outside the border */
14 margin: 10px;
15}
16
17/* Total width calculation (content-box):
18 200 + 20*2 + 2*2 + 10*2 = 264px */Box Sizing#
1/* Default: content-box */
2.content-box {
3 box-sizing: content-box;
4 width: 200px;
5 padding: 20px;
6 border: 2px solid black;
7 /* Total width: 200 + 40 + 4 = 244px */
8}
9
10/* Border-box: includes padding and border in width */
11.border-box {
12 box-sizing: border-box;
13 width: 200px;
14 padding: 20px;
15 border: 2px solid black;
16 /* Total width: 200px (content shrinks) */
17}
18
19/* Global reset - highly recommended */
20*, *::before, *::after {
21 box-sizing: border-box;
22}
23
24/* Or inherit from html */
25html {
26 box-sizing: border-box;
27}
28
29*, *::before, *::after {
30 box-sizing: inherit;
31}Width and Height#
1/* Fixed dimensions */
2.fixed {
3 width: 300px;
4 height: 200px;
5}
6
7/* Percentage of parent */
8.percentage {
9 width: 50%;
10 height: 100%;
11}
12
13/* Viewport units */
14.viewport {
15 width: 100vw;
16 height: 100vh;
17}
18
19/* Min/max constraints */
20.constrained {
21 width: 100%;
22 min-width: 200px;
23 max-width: 800px;
24
25 height: auto;
26 min-height: 100px;
27 max-height: 500px;
28}
29
30/* Auto */
31.auto-width {
32 width: auto; /* Fills available space (block) */
33}
34
35.auto-height {
36 height: auto; /* Shrinks to content */
37}
38
39/* Fit content */
40.fit-content {
41 width: fit-content;
42 /* Shrinks to content but respects min/max */
43}
44
45/* Min/max content */
46.min-content {
47 width: min-content;
48 /* Smallest without overflow */
49}
50
51.max-content {
52 width: max-content;
53 /* No wrapping */
54}Padding#
1/* Individual sides */
2.padding {
3 padding-top: 10px;
4 padding-right: 20px;
5 padding-bottom: 10px;
6 padding-left: 20px;
7}
8
9/* Shorthand - 4 values (TRBL - clockwise) */
10.shorthand-4 {
11 padding: 10px 20px 15px 25px;
12 /* top: 10, right: 20, bottom: 15, left: 25 */
13}
14
15/* Shorthand - 3 values */
16.shorthand-3 {
17 padding: 10px 20px 15px;
18 /* top: 10, left/right: 20, bottom: 15 */
19}
20
21/* Shorthand - 2 values */
22.shorthand-2 {
23 padding: 10px 20px;
24 /* top/bottom: 10, left/right: 20 */
25}
26
27/* Shorthand - 1 value */
28.shorthand-1 {
29 padding: 10px;
30 /* all sides: 10 */
31}
32
33/* Logical properties */
34.logical {
35 padding-block: 10px; /* top and bottom */
36 padding-inline: 20px; /* left and right */
37
38 padding-block-start: 10px; /* top in LTR */
39 padding-block-end: 15px; /* bottom in LTR */
40 padding-inline-start: 20px; /* left in LTR */
41 padding-inline-end: 25px; /* right in LTR */
42}
43
44/* Padding cannot be negative */
45.negative {
46 padding: -10px; /* Invalid! */
47}Border#
1/* Individual properties */
2.border {
3 border-width: 2px;
4 border-style: solid;
5 border-color: black;
6}
7
8/* Shorthand */
9.border-shorthand {
10 border: 2px solid black;
11}
12
13/* Individual sides */
14.sides {
15 border-top: 1px solid red;
16 border-right: 2px dashed blue;
17 border-bottom: 3px dotted green;
18 border-left: 4px double purple;
19}
20
21/* Border styles */
22.styles {
23 border-style: solid; /* Continuous line */
24 border-style: dashed; /* Dashed line */
25 border-style: dotted; /* Dotted line */
26 border-style: double; /* Two lines */
27 border-style: groove; /* 3D groove */
28 border-style: ridge; /* 3D ridge */
29 border-style: inset; /* 3D inset */
30 border-style: outset; /* 3D outset */
31 border-style: none; /* No border */
32 border-style: hidden; /* Hidden (table) */
33}
34
35/* Border radius */
36.rounded {
37 border-radius: 8px; /* All corners */
38 border-radius: 8px 16px; /* TL+BR, TR+BL */
39 border-radius: 8px 16px 24px; /* TL, TR+BL, BR */
40 border-radius: 8px 16px 24px 32px; /* TL, TR, BR, BL */
41}
42
43/* Circle */
44.circle {
45 width: 100px;
46 height: 100px;
47 border-radius: 50%;
48}
49
50/* Elliptical corners */
51.elliptical {
52 border-radius: 20px / 10px; /* horizontal / vertical */
53}
54
55/* Individual corners */
56.corners {
57 border-top-left-radius: 10px;
58 border-top-right-radius: 20px;
59 border-bottom-right-radius: 30px;
60 border-bottom-left-radius: 40px;
61}Margin#
1/* Individual sides */
2.margin {
3 margin-top: 10px;
4 margin-right: 20px;
5 margin-bottom: 10px;
6 margin-left: 20px;
7}
8
9/* Shorthand (same as padding) */
10.shorthand {
11 margin: 10px 20px 15px 25px; /* TRBL */
12 margin: 10px 20px; /* TB, LR */
13 margin: 10px; /* All */
14}
15
16/* Auto margins */
17.center-horizontal {
18 width: 200px;
19 margin-left: auto;
20 margin-right: auto;
21 /* Or: margin: 0 auto; */
22}
23
24/* Push to right */
25.push-right {
26 margin-left: auto;
27}
28
29/* Negative margins */
30.negative {
31 margin-top: -20px; /* Pull up */
32 margin-left: -10px; /* Pull left */
33}
34
35/* Overlapping with negative margin */
36.overlap {
37 margin-bottom: -50px;
38 /* Next element overlaps this one */
39}
40
41/* Logical properties */
42.logical {
43 margin-block: 10px;
44 margin-inline: 20px;
45 margin-inline-start: auto;
46}Margin Collapse#
1/* Vertical margins collapse */
2.box1 {
3 margin-bottom: 20px;
4}
5
6.box2 {
7 margin-top: 30px;
8}
9/* Space between: 30px (not 50px) - larger wins */
10
11/* Collapse doesn't happen with: */
12.no-collapse {
13 /* Horizontal margins */
14 margin-left: 20px;
15 margin-right: 30px;
16 /* Total: 50px */
17
18 /* Flexbox/Grid children */
19 display: flex;
20
21 /* Floated elements */
22 float: left;
23
24 /* Absolutely positioned */
25 position: absolute;
26
27 /* Elements with padding/border between */
28}
29
30/* Parent-child collapse */
31.parent {
32 margin-top: 20px;
33}
34
35.child {
36 margin-top: 30px;
37 /* Child margin escapes to parent! */
38 /* Result: 30px margin on parent */
39}
40
41/* Prevent parent-child collapse */
42.parent-fixed {
43 padding-top: 1px;
44 /* Or */
45 border-top: 1px solid transparent;
46 /* Or */
47 overflow: hidden;
48 /* Or */
49 display: flow-root;
50}Outline#
1/* Outline doesn't affect layout */
2.outline {
3 outline: 2px solid blue;
4 outline-offset: 4px; /* Space between border and outline */
5}
6
7/* Outline vs border */
8.comparison {
9 border: 2px solid red; /* Affects layout */
10 outline: 2px solid blue; /* Doesn't affect layout */
11}
12
13/* Focus outline */
14button:focus {
15 outline: 2px solid blue;
16 outline-offset: 2px;
17}
18
19/* Remove default (accessibility concern!) */
20button:focus {
21 outline: none;
22 /* Must provide alternative focus indicator */
23 box-shadow: 0 0 0 2px blue;
24}Display and Box Model#
1/* Block - full width, respects all box properties */
2.block {
3 display: block;
4 width: 200px;
5 height: 100px;
6 margin: 20px;
7 padding: 10px;
8}
9
10/* Inline - only horizontal box properties */
11.inline {
12 display: inline;
13 width: 200px; /* Ignored */
14 height: 100px; /* Ignored */
15 margin-top: 20px; /* Ignored */
16 margin-bottom: 20px; /* Ignored */
17 margin-left: 10px; /* Works */
18 margin-right: 10px; /* Works */
19 padding: 10px; /* Works visually but doesn't push vertically */
20}
21
22/* Inline-block - inline flow, respects all box properties */
23.inline-block {
24 display: inline-block;
25 width: 200px; /* Works */
26 height: 100px; /* Works */
27 margin: 20px; /* Works */
28 padding: 10px; /* Works */
29}Overflow#
1/* Control overflow behavior */
2.overflow {
3 width: 200px;
4 height: 100px;
5 overflow: visible; /* Default - content can overflow */
6 overflow: hidden; /* Clip overflow */
7 overflow: scroll; /* Always show scrollbars */
8 overflow: auto; /* Scrollbars when needed */
9}
10
11/* Separate axes */
12.overflow-axes {
13 overflow-x: auto;
14 overflow-y: hidden;
15}
16
17/* Text overflow */
18.text-overflow {
19 white-space: nowrap;
20 overflow: hidden;
21 text-overflow: ellipsis; /* Shows ... */
22}
23
24/* Overflow and new formatting context */
25.formatting-context {
26 overflow: hidden;
27 /* Creates block formatting context */
28 /* Contains floats, prevents margin collapse */
29}Box Decoration Break#
1/* Control box decoration across line breaks */
2.box-decoration {
3 box-decoration-break: slice; /* Default - cut across breaks */
4 box-decoration-break: clone; /* Repeat decoration per fragment */
5}
6
7/* Useful for inline elements with background */
8.highlight {
9 background: yellow;
10 padding: 2px 4px;
11 box-decoration-break: clone;
12 /* Each line gets its own padding/background */
13}Sizing Keywords#
1.sizing {
2 /* Content-based */
3 width: min-content; /* Smallest without overflow */
4 width: max-content; /* Natural size, no wrapping */
5 width: fit-content; /* Clamp between min and max */
6
7 /* Stretch to fill (block default) */
8 width: stretch; /* Fill available space */
9
10 /* Percentage of containing block */
11 width: 50%;
12
13 /* Viewport relative */
14 width: 100vw;
15 height: 100vh;
16 height: 100dvh; /* Dynamic viewport (mobile) */
17}
18
19/* Clamp function */
20.clamp {
21 width: clamp(200px, 50%, 800px);
22 /* min: 200px, preferred: 50%, max: 800px */
23}
24
25/* Min/max functions */
26.minmax {
27 width: min(100%, 800px);
28 width: max(200px, 25%);
29}Aspect Ratio#
1/* Maintain aspect ratio */
2.aspect-ratio {
3 aspect-ratio: 16 / 9;
4 width: 100%;
5 /* Height calculated automatically */
6}
7
8/* Square */
9.square {
10 aspect-ratio: 1;
11 /* Or: aspect-ratio: 1 / 1; */
12}
13
14/* With min/max constraints */
15.constrained-aspect {
16 aspect-ratio: 4 / 3;
17 width: 100%;
18 max-height: 500px;
19 /* Aspect ratio may be overridden by max-height */
20}Visual Formatting Model#
1/* Block formatting context (BFC) */
2.bfc {
3 /* Create new BFC */
4 display: flow-root;
5 /* Or */
6 overflow: hidden;
7 /* Or */
8 display: flex;
9 display: grid;
10
11 /* BFC contains floats, prevents margin collapse */
12}
13
14/* Clear floats */
15.clearfix::after {
16 content: "";
17 display: table;
18 clear: both;
19}
20
21/* Modern clearfix */
22.container {
23 display: flow-root;
24}Best Practices#
Box Sizing:
✓ Use border-box globally
✓ Understand content-box calculations
✓ Use logical properties for i18n
✓ Reset box-sizing on components if needed
Margins:
✓ Understand margin collapse
✓ Use margin-block for vertical spacing
✓ Use auto margins for centering
✓ Be careful with negative margins
Layout:
✓ Know when to use padding vs margin
✓ Use outline for focus states
✓ Create BFC when needed
✓ Use aspect-ratio for media
Avoid:
✗ Hardcoding heights
✗ Ignoring content-box calculations
✗ Removing focus outlines without alternative
✗ Overusing negative margins
Conclusion#
The CSS box model is the foundation of all CSS layouts. Use border-box for predictable sizing, understand margin collapse for vertical spacing, and leverage modern features like aspect-ratio and logical properties. Master these concepts to build robust, maintainable layouts.