Box Model & Layout

Understanding the CSS Box Model

Every element in CSS is represented as a rectangular box. The box model describes how the size of each element is calculated and how elements interact with each other. Understanding this is fundamental to mastering CSS layout.

Each box consists of four distinct areas, from inside out:

1. Content: The actual text, images, or other content
2. Padding: Clear space around the content, inside the border
3. Border: A line that wraps around the padding and content
4. Margin: Clear space around the border, separating from other elements

Visual Box Model Diagram

Box Sizing: The Game Changer

By default, when you set width: 200px, you're only setting the content width. Padding and border are added on top of that width, making the total size unpredictable. This is called content-box.

box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px;
/* Total width: 250px */

box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px;
/* Total width: 200px */

*, *::before, *::after {
  box-sizing: border-box;
}

The Display Property

The display property determines how an element behaves in the layout flow. It's one of the most important CSS properties.

div, p, h1-h6, section { 
  display: block; 
}

span, a, strong, em { 
  display: inline; 
}

.button {
  display: inline-block;
  width: 120px;
  height: 40px;
}

.hidden { 
  display: none; 
}

.invisible { 
  visibility: hidden; 
}

Margin & Padding

Margin creates space outside elements (between elements), while padding creates space inside elements (between content and border).

/* One value - all sides */
margin: 20px;

/* Two values - vertical | horizontal */
margin: 10px 20px;

/* Three values - top | horizontal | bottom */
margin: 10px 20px 30px;

/* Four values - top right bottom left (clockwise) */
margin: 10px 20px 30px 40px;

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

.centered {
  width: 600px;
  margin: 0 auto;  /* Top/bottom 0, left/right auto */
}

.overlap {
  margin-top: -20px;
}

Margin Collapse

One of CSS's most confusing behaviors: When two vertical margins meet, they don't add up—they collapse to the larger of the two. This ONLY happens with vertical margins (top/bottom), never horizontal (left/right).

/* Method 1: Use flexbox or grid */
.container {
  display: flex;
  flex-direction: column;
}

/* Method 2: Add border or padding */
.container {
  padding: 1px;
}

/* Method 3: Create new block formatting context */
.container {
  overflow: hidden;
}

Width & Height

/* Fixed size - not responsive */
.box {
  width: 300px;
  height: 200px;
}

/* Responsive size */
.container {
  width: 100%;           /* Full width of parent */
  max-width: 1200px;     /* But never more than 1200px */
  min-width: 320px;      /* And never less than 320px */
}

/* Viewport units */
.hero {
  height: 100vh;  /* 100% of viewport height */
  width: 100vw;   /* 100% of viewport width */
}

/* Calculated values */
.sidebar {
  width: calc(100% - 250px);  /* Full width minus 250px */
}

/* Percentage heights require parent height */
.child {
  height: 50%;  /* Only works if parent has defined height */
}