HTML Block & Inline Elements
Understanding how elements behave on the page
📦 Block vs Inline Elements
HTML elements are displayed in two main ways: block elements take up the full width and start on a new line, while inline elements only take up as much space as needed.
<!-- Block element -->
<div>I'm a block element</div>
<!-- Inline element -->
<span>I'm inline</span> <span>Me too!</span>
🔹 Block Elements
Block elements always start on a new line and take up the full width available:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<p>Another paragraph.</p>Output:
This is a heading
This is a paragraph.
Another paragraph.
📝 Common Block Elements:
-
<div>- Generic container -
<p>- Paragraph -
<h1> to <h6>- Headings -
<ul>, <ol>- Lists -
<header>, <footer>- Semantic sections
🔹 Inline Elements
Inline elements don't start on a new line and only take up necessary space:
<p>This paragraph contains <strong>bold text</strong> and
<em>italic text</em> and a <a href="#">link</a> all inline.</p>Output:
This paragraph contains bold text and italic text and a link all inline.
📝 Common Inline Elements:
-
<span>- Generic inline container -
<a>- Links -
<strong>, <b>- Bold text -
<em>, <i>- Italic text -
<img>- Images
🔹 Inline-Block Elements
You can change element behavior using CSS display property:
<style>
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
margin: 5px;
}
</style>
<span class="inline-block">Box 1</span>
<span class="inline-block">Box 2</span>
<span class="inline-block">Box 3</span>Output:
🔹 Practical Example
Understanding block vs inline helps with layout:
<!-- Navigation using inline elements -->
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<!-- Content using block elements -->
<main>
<h1>Welcome</h1>
<p>This is the main content area.</p>
</main>Output:
Welcome
This is the main content area.