The Content Box

Difficulty: Beginner

Every element in CSS is rendered as a rectangular box. The CSS box model describes how these boxes are structured and how their size is calculated. At the very center of the box model is the content area -- the region where text, images, or child elements are displayed. The width and height properties control the size of this content area by default.

Block-level elements (like <div>, <p>, <h1>-<h6>, <section>) take up the full width available from their parent container and start on a new line. Their width defaults to 100% of the parent, and their height is determined by their content. You can explicitly set both width and height on block elements. Inline elements (like <span>, <a>, <strong>, <em>) only take up as much width as their content needs and do not start on a new line. Crucially, width and height properties have no effect on inline elements -- the element's size is entirely determined by its content.

The display property controls how an element participates in the layout flow. The most common values are block (full width, starts new line), inline (content width, stays in line), inline-block (content width like inline, but respects width/height like block), none (removes from layout entirely), and flex/grid (creates flexible or grid layout contexts). Understanding display is fundamental because it determines which box model properties are actually effective.

When you set width: 300px on a block element, you are setting the width of the content area only (in the default content-box model). Padding, border, and margin are added on top of this width, making the total space the element occupies larger than 300px. This is the default behavior and is often counterintuitive, which is why many developers switch to border-box sizing (covered in a later lesson).

Percentage-based widths are relative to the parent element's content area width. Setting width: 50% on a child makes its content area half the width of its parent's content area. Heights work differently -- percentage heights only work if the parent has an explicit height set. A height of 100% on a child whose parent has no defined height will have no effect, which is a common source of confusion.

Code examples

Block vs Inline Elements

/* Block element: takes full width */
div {
  width: 300px;
  height: 100px;
  background-color: lightblue;
}

/* Inline element: width and height are IGNORED */
span {
  width: 300px;  /* has no effect */
  height: 100px; /* has no effect */
  background-color: lightyellow;
}

/* Inline-block: respects width/height like block,
   but stays in the inline flow */
.badge {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: lightgreen;
}

Block elements accept width and height. Inline elements ignore them entirely. Inline-block is a hybrid: it respects dimensions like a block element but does not force a new line like inline elements.

Setting Width and Height

.card {
  width: 350px;
  height: 200px;
  background-color: #f5f5f5;
}

/* Min and max constraints */
.flexible-card {
  width: 50%;
  min-width: 200px;
  max-width: 600px;
  min-height: 100px;
  background-color: #e0e0e0;
}

/* Full viewport height */
.hero {
  width: 100%;
  height: 100vh;
  background-color: #333;
}

Fixed widths use pixel values. Percentage widths are relative to the parent. Use min-width/max-width to set bounds on flexible elements. The vh unit (viewport height) is useful for full-screen sections. min-height is often more practical than height since content may overflow a fixed height.

Content Overflow

/* When content exceeds the box size */
.small-box {
  width: 200px;
  height: 100px;
  background-color: #ffeeba;
  
  /* Default: content overflows visibly */
  overflow: visible;
}

.scroll-box {
  width: 200px;
  height: 100px;
  background-color: #d4edda;
  
  /* Add scrollbar when content overflows */
  overflow: auto;
}

.hidden-box {
  width: 200px;
  height: 100px;
  background-color: #f8d7da;
  
  /* Clip overflowing content */
  overflow: hidden;
}

When content is larger than the box, the overflow property controls what happens. 'visible' (default) lets content spill out. 'auto' adds scrollbars only when needed. 'hidden' clips the overflow. 'scroll' always shows scrollbars. You can also control each axis independently with overflow-x and overflow-y.

Display Property Values

/* Force inline elements to be block */
span.block {
  display: block;
  width: 200px;
  height: 50px;
  background-color: coral;
}

/* Force block elements to be inline */
div.inline {
  display: inline;
  /* width and height will be ignored now */
}

/* Inline-block: best of both worlds */
.nav-item {
  display: inline-block;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #007bff;
  color: white;
}

/* Remove from layout entirely */
.hidden {
  display: none;
}

The display property changes how an element participates in layout. You can make a <span> behave like a block element or a <div> behave inline. display: none removes the element from the layout completely (it takes up no space), unlike visibility: hidden which hides the element but reserves its space.

Key points

Concepts covered

width, height, Inline vs Block, Display Property, Content Area