Part 2: Box Model, Display, and Positioning

Introduction

Every element on a page is a rectangular box. Understanding how those boxes are sized, how they relate to their neighbours, and how they can be pulled out of normal document flow is the foundation of CSS layout. I have debugged more layout problems by going back to box model fundamentals than by any other means. This part covers what I know about the box model, display modes, and positioning, from daily basics to the edge cases that catch people off guard.

---

The Box Model

Every HTML element generates a box with four layers:

┌─────────────────────────────────┐
│             margin              │
│  ┌───────────────────────────┐  │
│  │          border           │  │
│  │  ┌─────────────────────┐  │  │
│  │  │       padding       │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    content    │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

• Content — where text, images, and child elements live

• Padding — transparent space between content and border

• Border — visible (or invisible) line around the padding

• Margin — space outside the border, separating the element from neighbours

box-sizing

The browser's default box-sizing: content-box means width and height set the content area only. Padding and border are added on top, making elements wider/taller than the declared size.

/* content-box default */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* actual rendered width: 200 + 20*2 + 2*2 = 244px */
}

box-sizing: border-box includes padding and border in the declared dimensions:

/* Applied globally in my reset */
*, *::before, *::after {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* actual rendered width: exactly 200px */
}

border-box matches how most people think about sizing. I apply it globally on every project.

---

Margin, Padding, and Border

Shorthand Syntax

All three properties follow the same shorthand pattern:

/* All four sides */
margin: 1rem;

/* Top/bottom, left/right */
margin: 1rem 2rem;

/* Top, left/right, bottom */
margin: 1rem 2rem 0.5rem;

/* Top, right, bottom, left (clockwise) */
margin: 1rem 2rem 0.5rem 0.75rem;

Individual Properties

margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 1rem;
margin-left: 2rem;

padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;

Logical Properties (Modern CSS)

Logical properties work in terms of writing direction rather than physical sides — useful for internationalisation:

/* Block axis (top/bottom in horizontal writing) */
margin-block: 1rem;          /* shorthand for block-start + block-end */
margin-block-start: 1rem;    /* equivalent to margin-top in LTR */
margin-block-end: 1rem;      /* equivalent to margin-bottom in LTR */

/* Inline axis (left/right in horizontal writing) */
margin-inline: 2rem;         /* shorthand for inline-start + inline-end */
padding-inline: 1rem;

Border

/* Shorthand: width style color */
border: 1px solid #e2e8f0;

/* Individual sides */
border-top: 2px solid #3b82f6;
border-bottom: none;

/* Individual properties */
border-width: 1px;
border-style: solid;         /* solid, dashed, dotted, double, none */
border-color: #e2e8f0;

/* Radius */
border-radius: 0.5rem;
border-radius: 0.5rem 0.5rem 0 0;    /* top-left top-right bottom-right bottom-left */
border-radius: 50%;                   /* circle (on equal width/height element) */

Outline

outline is drawn outside the border and does not affect layout (no space taken). It is primarily used for focus indicators:

button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;   /* gap between element and outline */
}

Never do outline: none without providing an alternative focus style — it removes keyboard navigation visibility.

---

Margin Collapse

Block margins collapse in the vertical direction: when two block elements stack, their margins do not add — the larger margin wins.

.section-a { margin-bottom: 2rem; }
.section-b { margin-top: 1rem; }
/* Gap between them: 2rem (not 3rem) */

Margin collapse also happens between a parent and its first/last child when there is no border, padding, or content between them:

/* Parent margin collapses with child margin */
.parent { margin-top: 2rem; }
.child  { margin-top: 3rem; }
/* 3rem gap above parent (child's margin "escapes" to parent) */

To prevent parent-child collapse, add any padding or border to the parent:

.parent {
  padding-top: 1px;   /* prevents margin collapse with first child */
}

Margin collapse does not happen:

• Horizontally (left/right)

• On flex or grid children

• When overflow is not visible on the parent

---

Display

The display property controls how an element participates in flow layout and how it lays out its children.

display: block

Takes full available width, forces a line break before and after, respects width/height/margin.

div, p, h1, h2, section, article, header, footer, main, nav {
  display: block; /* default */
}

display: inline

Takes only as much width as its content, no forced line breaks, ignores width/height, vertical margin/padding does not affect surrounding layout.

span, a, strong, em, code {
  display: inline; /* default */
}

display: inline-block

Inline flow (no forced line breaks) but respects width/height and all margin/padding.

.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

display: none

Removes element from the page entirely — not rendered, takes no space, invisible to accessibility tools.

.hidden { display: none; }

To hide visually but keep accessible to screen readers:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

display: flex

Turns the element into a flex container. Children become flex items. Covered fully in Part 3.

display: grid

Turns the element into a grid container. Children become grid items. Covered fully in Part 4.

display: contents

Removes the element's box but keeps its children in the flow — useful when you need to wrap elements for semantic reasons without adding a layout box.

.wrapper {
  display: contents;
  /* element acts as if it isn't there; children participate in parent's layout */
}

---

Width and Height

.container {
  width: 100%;           /* percentage of parent */
  max-width: 1200px;     /* cap growth */
  min-width: 320px;      /* prevent shrinking below */

  height: auto;          /* default: grows with content */
  min-height: 100vh;     /* at least full viewport height */
}

width: auto vs width: 100%

• auto — block element fills available width minus its own margins (respects margin)

• 100% — fills 100% of parent's content width, then adds margin on top (can overflow)

Viewport Units

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

/* Dynamic viewport units (accounts for mobile browser chrome) */
.full-height {
  height: 100dvh;  /* dynamic viewport height */
}

aspect-ratio

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.avatar {
  width: 3rem;
  aspect-ratio: 1;   /* square */
  border-radius: 50%;
}

---

Overflow

Controls what happens when content exceeds the element's dimensions.

.box {
  overflow: visible;   /* default: content spills out */
  overflow: hidden;    /* clips overflowing content */
  overflow: scroll;    /* always shows scrollbar */
  overflow: auto;      /* scrollbar only when content overflows */
  overflow: clip;      /* clips like hidden but no scroll even programmatically */
}

/* Control axes independently */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Long words/URLs that overflow their container */
.prose {
  overflow-wrap: break-word;
  word-break: break-word;
}

---

Positioning

The position property controls how an element is placed in the document.

position: static (default)

Normal document flow. top, right, bottom, left, and z-index have no effect.

position: relative

Element stays in normal flow but can be offset from its natural position using top, right, bottom, left. The space it originally occupied is preserved.

.nudged {
  position: relative;
  top: -2px;    /* shift 2px upward */
  left: 4px;
}

More commonly used to make an element a containing block for absolutely positioned children:

.card {
  position: relative;  /* establishes positioning context */
}

.card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

position: absolute

Removed from normal flow (no space reserved). Positioned relative to the nearest ancestor with position other than static. If none, positions relative to the initial containing block (viewport).

.dropdown {
  position: absolute;
  top: 100%;      /* below the parent's bottom edge */
  left: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #e2e8f0;
  z-index: 100;
}

position: fixed

Removed from flow. Positioned relative to the viewport. Stays in place as the user scrolls.

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

position: sticky

Hybrid: behaves as relative until a threshold is reached while scrolling, then becomes fixed relative to its scroll container.

.table-header th {
  position: sticky;
  top: 0;
  background: #f7fafc;
  z-index: 1;
}

.sidebar {
  position: sticky;
  top: 2rem;
  align-self: start;   /* needed inside flex/grid to prevent stretching */
}

sticky only works if:

• A top (or bottom) threshold is set

• The element's scroll container has scrollable overflow

• The parent is taller than the sticky element

z-index

Controls stacking order for positioned elements (relative, absolute, fixed, sticky). Higher values stack on top.

.modal-overlay { z-index: 400; }
.modal          { z-index: 500; }
.tooltip        { z-index: 600; }

z-index only works on positioned elements. It creates a stacking context — a child element cannot appear above an ancestor's stacking context peer, regardless of z-index value.

---

The float Property

Float shifts an element to the left or right edge of its container, allowing text to wrap around it. It is the legacy layout mechanism — before Flexbox and Grid, floats were used for multi-column layouts.

.article-image {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 300px;
}

Clearing floats:

/* Modern clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Or use flow-root on the container */
.container {
  display: flow-root;
}

I use floats only for text-wrapping around images. For page layout, I use Flexbox or Grid.

---

visibility vs display: none vs opacity: 0

Property	Space Reserved	Accessible to Screen Readers	Events
display: none	No	No	No
visibility: hidden	Yes	No	No
opacity: 0	Yes	Yes	Yes

/* Toggle visibility without layout shift */
.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip.is-visible {
  visibility: visible;
  opacity: 1;
}

visibility and opacity are combined here because visibility: hidden cannot be transitioned smoothly, but opacity can. The combination gives a fade effect without layout shift.

---

Summary

Concept	Key Point
box-sizing: border-box	Width includes padding + border — apply globally
Margin collapse	Vertical block margins collapse; flex/grid children exempt
display: block	Full width, forces line break
display: inline	Content width only, no width/height
display: inline-block	Inline flow + respects box model
display: none	Removes element entirely from page and accessibility tree
position: relative	Creates positioning context for absolute children
position: absolute	Removed from flow, positioned to nearest positioned ancestor
position: fixed	Positioned to viewport, stays on scroll
position: sticky	Relative until threshold, then fixed within container
z-index	Stacking order — works only on positioned elements
overflow	Control clipping/scrolling of overflowing content

---

Up Next

Part 3 covers Flexbox — the modern one-dimensional layout system.