Know the difference between block and inline elements
Identify which elements default to block vs inline
Understand when to use divs and spans
Apply these concepts to style HTML elements effectively
Quick Review: Box Model
Remember from last lesson:
Every element is a rectangular box
Box consists of: Content, Padding, Border, Margin
box-sizing property changes calculation
Today: How boxes interact with each other!
Normal Flow
The default way browsers lay out HTML elements without any CSS positioning.
Key Concepts:
Elements render in the order they appear in HTML
Block elements stack vertically
Inline elements flow horizontally
No overlapping (unless positioned)
Think of it as: How elements "naturally" arrange themselves on the page
The Display Property
Controls how an element behaves in the document flow
/* Common display values */
display: block;
display: inline;
display: inline-block;
display: none;
display: flex; /* Coming next lesson! */
Today we focus on the first three!
Block Elements 📦
Characteristics:
Start on a new line
Take up the full width available
Stack vertically
Can have width, height, margin, and padding
/* Default behavior */
display: block;
Common Block Elements
Structural:
<div>
<section>
<article>
<header>
<footer>
<main>
<nav>
Content:
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<hr>
Block Elements Visualization
<div> Block element 1 </div>
<p> Block element 2 </p>
<h3> Block element 3 </h3>
Notice how each element:
Starts on its own line
Extends the full width of container
Pushes the next element down
Inline Elements ➡️
Characteristics:
Do NOT start on a new line
Only take up as much width as necessary
Flow within text content
Cannot set width or height
Vertical padding/margin behaves differently
/* Default behavior */
display: inline;
Common Inline Elements
<span> - Generic inline container
<a> - Links
<strong>, <b> - Bold text
<em>, <i> - Italic text
<img> - Images
<button> - Buttons
<input> - Form inputs
<label> - Form labels
<code> - Code snippets
Inline Elements Visualization
This is a paragraph with an inline span and
another span that flow with the text.
Here's a link too!
Notice how inline elements:
Stay in line with surrounding text
Don't break the flow
Only take necessary space
Block vs Inline: Key Differences
Property
Block
Inline
Line breaks
Yes (before & after)
No
Width
100% by default
Content-based
Can set width/height?
Yes
No
Margin/Padding
All sides work
Horizontal only*
*Vertical padding/margin on inline elements can cause overlap issues
⚠️ Inline Elements: Padding & Margin
Important: Vertical padding and margin on inline elements don't push other elements away!
/* This can cause overlapping! */
span {
padding: 20px 10px; /* Vertical padding may overlap */
margin: 20px 10px; /* Vertical margin often ignored */
}
Best Practice: Avoid vertical spacing on inline elements. Use inline-block if needed!
Inline-Block: The Middle Ground 🎯
Combines features of both block and inline elements!
Characteristics:
Flows inline (no line break)
BUT respects width, height, padding, margin like block
/* Make a span act like a block */
span.block-span {
display: block;
}
/* Make a div act inline */
div.inline-div {
display: inline;
}
/* Hide an element completely */
.hidden {
display: none;
}