HTML Block and Inline Elements

🎯 Quick Overview

Block Elements = Full width, new line
Inline Elements = Content width, same line

📋 Block Elements

Block elements always start on a new line and take full width.

Common Block Elements

Example

<div>This is a container</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Browser Output:

🔗 Inline Elements

Inline elements flow with text and take only needed space.

Common Inline Elements

Example

<p>This is <strong>bold</strong> and <em>italic</em> text with a <a href="#">link</a>.</p>

Browser Output:

🔄 Visual Comparison

Block Behavior

<h1>Title</h1>
<p>Paragraph text here</p>
<div>Container content</div>

Browser Output:

Inline Behavior

<span>Text</span><strong>Bold</strong><em>Italic</em><a href="#">Link</a>

Browser Output:

Mixed Example

<div>
  Block container with <strong>bold</strong> and <em>italic</em> inline text.
</div>
<p>Another paragraph with a <a href="#">clickable link</a>.</p>

Browser Output:

🎛️ CSS Display Control

/* Change behavior */
span { display: block; }    /* Inline → Block */
div { display: inline; }    /* Block → Inline */
img { display: inline-block; } /* Hybrid */

Display Values

• block - Full width, new line
• inline - Content width, same line
• inline-block - Content width but can set width/height
• none - Hide element

📏 Quick Reference

🚫 Nesting Rules

✅ Allowed

<div>
  <p>Text with <strong>bold</strong> word</p>
</div>

Browser Output:

❌ Not Allowed

<strong>
  <div>Block inside inline</div>  <!-- Wrong! -->
</strong>

✨ Key Takeaways

• Block = structure and layout
• Inline = text formatting
• Block elements stack vertically
• Inline elements flow horizontally
• Use CSS display to change behavior