CSS Box Model and Layout Techniques

What This Teaches

This lesson teaches how every visible element on a webpage is drawn as a box.

You will learn how content, padding, border, margin, and box-sizing affect the space an element takes up.

You will also learn how basic layout techniques like display, float, flexbox, and grid change how elements arrange themselves.

Why It Matters

Most layout problems are box model problems first.

When spacing looks strange, elements overflow, columns do not line up, or a card is wider than expected, the answer is often padding, margin, border, or box-sizing.

Understanding the box model gives you a reliable way to debug layout instead of guessing at random CSS properties.

Core Concept: Block vs. Inline Behavior

HTML elements are broadly categorized as either block-level or inline elements, each with distinct behaviors.

Block-level elements

• Occupy the full width available to them by default.
• Create line breaks before and after the element, stacking vertically.
• Respect width and height properties.
• Padding, margins, and borders apply and affect the layout of surrounding elements.
• Examples: h1, p, div, ul, form, table

Inline elements

• Only occupy the space needed for their content.
• Flow within a line of text, not creating line breaks.
• Ignore width and height properties.
• Vertical padding, margins, and borders apply but don't affect the positioning of other inline elements.
• Horizontal padding, margins, and borders apply and affect the positioning of other inline elements.
• Examples: span, a, img, strong, em

Core Concept: The CSS Box Model

Every element on a web page is treated as a rectangular box, composed of content, padding, border, and margin.

Box Layer: Content

The actual content of the element, such as text, images, or other media. The height and width of the content area determine the element's natural size.

Box Layer: Padding

The space between the content and the border. Padding is transparent and expands the background color of the element.

p {
  background-color: lightblue;
  padding: 20px;
}

Box Layer: Border

A visual boundary surrounding the padding and content. Borders can have different styles, colors, and thicknesses.

div {
  border: 2px solid black;
}

Box Layer: Margin

The space outside the border, creating separation between elements. Margins are transparent and collapse with adjacent margins.

h1 {
  margin-bottom: 1em;
}

Core Concept: box-sizing

The box-sizing property determines how the width and height of an element are calculated.

Many developers prefer border-box because it makes element sizing easier to predict.

• content-box: The default. Width and height include only the content area.
• border-box: Width and height include content, padding, and border, but not margin.

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* Total width will still be 200px */
}

Core Concept: Layout Techniques

CSS includes several layout techniques for controlling how elements are displayed and arranged.

Different layout tools solve different layout problems. The trick is choosing the right one.

Code Example: display Property

• display: none; hides the element completely.
• display: block; makes the element a block-level element.
• display: inline; makes the element inline.
• display: inline-block; combines block and inline behaviors.

.hidden {
  display: none;
}

.button-like-link {
  display: inline-block;
  padding: 0.5rem 1rem;
}

Float

float: left; or float: right; allows content to wrap around the floated element. Use sparingly due to complexity.

Flexbox

display: flex; enables the Flexbox layout model for one-dimensional layouts.

.card-row {
  display: flex;
  gap: 1rem;
}

Grid

display: grid; allows for two-dimensional layouts with rows and columns.

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Common Mistakes

• Forgetting that padding and border can increase the final size of an element when using content-box.
• Using margin when padding would better create internal space.
• Using padding when margin would better separate two elements.
• Trying to set width or height on inline elements and expecting it to work like a block.
• Using float for modern page layout when flexbox or grid would be simpler.
• Not accounting for margin collapse between vertical block elements.

Debugging Checklist

• Inspect the element in browser developer tools and look at the box model diagram.
• Check whether the element is block, inline, inline-block, flex, or grid.
• Temporarily add a border or background color to see the real size of the element.
• Check whether spacing is coming from padding, margin, gap, or line-height.
• Set box-sizing: border-box when sizing feels unpredictable.
• Remove layout rules one at a time to find which property is creating the issue.

Resources

MDN: The box model | MDN: display | CSS-Tricks: box-sizing