Block vs Inline
Overview
Every HTML element has a default display behavior. Understanding the difference between 'Block-level' and 'Inline' elements is the absolute foundation of CSS layout and rendering. Block-level elements aggressively claim the entire width of their parent container and force a line break before and after themselves. Inline elements are passive; they only take up as much width as their inner content requires, and they sit peacefully side-by-side on the same horizontal line.
Syntax
<!-- BLOCK-LEVEL ELEMENTS -->
<!-- Examples: <div>, <p>, <h1>, <section>, <ul> -->
<div style="border: 2px solid red;">
I am a block! I span the entire width of the screen.
</div>
<div style="border: 2px solid blue;">
I am forced onto a brand new line.
</div>
<!-- INLINE ELEMENTS -->
<!-- Examples: <span>, <a>, <strong>, <img> -->
<span style="border: 2px solid green;">I am inline!</span>
<span style="border: 2px solid purple;">I sit right next to my friend!</span>Common Pitfalls
- Nesting Block elements inside Inline elements (e.g., placing a
<div>inside a<span>or an<h2>inside an<a>). This is fundamentally invalid HTML. Inline elements are designed strictly to wrap small pieces of text or data. - Trying to apply
width,height,margin-top, ormargin-bottomto Inline elements via CSS. The browser will completely ignore these properties unless you change the element todisplay: inline-blockordisplay: block.
Interview Questions
Vertical margins are completely ignored. Vertical padding WILL apply visually (the background color will stretch), but it will not affect the document flow, meaning it will aggressively overlap the text lines above and below it.
Real-World Example
Using spans to style specific words inside a block-level paragraph without breaking the sentence.
<!-- The <p> is Block-level, creating the paragraph structure -->
<p>
Your total balance is
<!-- The <span> is Inline, letting us inject CSS without breaking the line -->
<span style="color: green; font-weight: bold;">$5,400.00</span>
as of today.
</p>Check Your Knowledge
Test your understanding of Block vs Inline with these quick questions.