? Block vs Inline Elements in HTML

⚡ Quick Overview

In HTML, elements are broadly classified as block-level or inline. This classification affects how elements stack, how much width they occupy, and how they interact with surrounding content. Mastering this concept is essential for controlling layout and building clean, readable web pages.

? Key Concepts

Block-level elements:
- Always start on a new line.
- Stretch across the full width of their container by default.
- Can contain other block or inline elements.
- Examples: <div>, <h1> to <h6>, <p>, <section>.
Inline elements:
- Do not start on a new line; they appear within the flow of text.
- Only take up as much width as their content needs.
- Can contain text or other inline elements.
- Examples: <span>, <a>, <strong>, <em>.

? Use Cases

Use a block-level element like <div> or <section> to group related content into sections.
Use an inline element like <span> or <strong> to style or highlight part of a sentence.
Combine both to build layouts: blocks for structure, inline elements for inline formatting.

? Syntax and Behavior

In HTML, the default display behavior of an element is defined by the browser:

Block elements have display: block; by default.
Inline elements have display: inline; by default.

You can change this behavior using CSS. For example, setting display: inline; on a block element makes it behave like inline, and vice versa. There is also display: inline-block;, which combines features of both: it respects width/height like a block but sits in line with text.

? Code Example

? View Code Example

<!-- This is a block-level container -->
<div style="border: 2px solid #0b3d91; padding: 15px; margin-bottom: 20px;">
  <p>This paragraph is inside a <div> block.</p>
  <p>Multiple elements can be grouped here.</p>
</div>

<!-- This is inline text inside a paragraph -->
<p>This sentence contains a 
  <span style="background-color: #cce5ff; color: #0b3d91; font-weight: bold; 
  padding: 3px 6px; border-radius: 4px;">highlighted text</span> 
  using the <span> tag.</p>

?️ Live Output & Explanation

Live Output:

This paragraph is inside a <div> block.

Multiple elements can be grouped here.

This sentence contains a highlighted text using the <span> tag.

The bordered box above is a block-level <div>, so it starts on a new line and stretches across the width of its container. Inside it, paragraphs are also block elements, stacking vertically.

The highlighted word is inside an inline <span>. It does not break the line; instead, it flows with the text while applying custom styling.

? Tips & Best Practices

Block elements always start on a new line and span the full width by default.
Inline elements stay within the text flow and don’t break lines.
Use the CSS display property to switch behavior when needed (e.g., inline-block for inline layout with block-like sizing).
Prefer semantic tags (<header>, <main>, <article>) over generic <div> for better structure and accessibility.

? Try It Yourself

Create a section using a block element (<div>) and add multiple paragraphs inside it.
Highlight a single word in a paragraph using <span> with your own CSS styles.
Change a <span> to display: block; in CSS and observe how the layout changes.
Build a small page mixing headings (block) with inline formatting elements like <em> and <strong>.

? Summary

Block and inline elements are the foundation of HTML layout. Block-level elements create the main structure of the page and stack vertically, while inline elements format content within a line of text. Knowing which type you are working with—and how to change it using the CSS display property—gives you precise control over how your content appears in the browser.

Block and Inline Elements