HTML & CSS · Quick Reference

Lesson 6 — Box Model & Layout Cheat Sheet

HTML & CSS

In one line: Every element on a webpage is a rectangular box. The box model has four layers, from inside out: content, padding, border, and margin. Understanding this model is the single mos...

Key Ideas

1The CSS Box Model. Every element on a webpage is a rectangular box. The box model has four layers, from inside out: content, padding, border, and margin. Understanding this model is the ...

2The display Property. The display property determines how an element is laid out. It's one of the most powerful properties in CSS and unlocks every layout technique.

3CSS Positioning. The position property controls how an element is placed in the document flow. It unlocks top, right, bottom, and left offset properties. Understanding position is esse...

4Width, Height & Overflow. Controlling how elements handle their size and what happens when content overflows the box are essential CSS skills for building robust, responsive layouts.

Code Examples

.card {
  /* Content */
  width: 300px;
  height: 200px;   /* or auto to fit content */

  /* Padding — space INSIDE the border */
  padding: 20px;                    /* all 4 sides */
  padding: 20px 40px;               /* top-bottom left-right */
...

/* Make inline elements behave like blocks */
a.btn {
  display: inline-block;
  padding: 12px 24px;     /* works on inline-block! */
  width: 200px;            /* works on inline-block! */
  background: blue;
  color: white;
}

/* Hide an element ...

/* STATIC (default) — in normal document flow */
.normal { position: static; } /* top/right/bottom/left ignored */

/* RELATIVE — offset from its normal position */
.nudged {
  position: relative;
  top: 10px;    /* moves DOWN 10px from where it would...