HTML Block and Inline Elements

HTML Block and Inline Elements

Understanding this difference is very important for layout and styling.

 1. Block-Level Elements

Block elements:

• Always start on a new line

• Take full width available

• You can set width, height, margin, padding

 Common Block Elements

 Example

Output:

 2. Inline Elements

Inline elements:

• Do not start on a new line

• Take only required width

• Width & height cannot be set directly

Common Inline Elements

Example

Output:

 3. Block vs Inline (Side-by-Side Example)

• <div> takes full width
• <span> stays in the same line

 4. div vs span (Most Important)

Example

 5. Inline-Block (Bonus Concept)

inline-block behaves like:

• Inline (same line)

• Block (width/height allowed)

•  Boxes appear side by side
• Custom size allowed

 6. Changing Element Behavior with CSS

You can change display type using CSS.

 Common Mistakes

•  Putting block elements inside inline elements
•  Using <br> instead of proper block elements
•  Confusing <div> and <span> 
•  Using inline elements for layout

 Key Points to Remember

• Block → New line, full width

• Inline → Same line, content width

• <div> = block container

• <span> = inline container

• inline-block = best of both