Block-Level element vs Inline element

1. Block-Level Elements

A block-level element starts on a new line and stretches across the entire width of the page, like a solid brick in a wall.

Key Characteristics

• Always starts on a fresh line.
• Takes up 100% of the available width by default.
• Respects both width/height and top/bottom margin adjustments.
• Can contain other block or inline elements.

Common Examples

• <div>: A generic container used to group sections.
• <p>: A paragraph of text.
• <h1> to <h6>: Section headings.

Inline Elements

An inline element does not start on a new line. It takes up only as much width as its actual content needs, like text sitting inside a sentence.

Key Characteristics

• Sits right alongside other inline elements on the same line.
• Width and height properties have no effect on inline elements.
• Ignores top and bottom margins (only left/right margins work).
• Usually contains text or other inline elements.

Common Examples

• <a>: A hyperlink.
• <b> or <strong>: Bold text.
• <i> or <em>: Italicized text.