How Elements Sit in Flow

The display property determines how an element behaves relative to neighbors.

1. block (Block-level)

(div, h1, p, section)

• Takes all available width.
• Always starts on a new line.
• Can set width, height, margin, and padding.

2. inline (Inline)

(span, a, strong)

• Takes exactly as much space as content needs.
• Goes in one line with text.
• Cannot set width and height. Vertical margin and padding work incorrectly.

3. inline-block (Hybrid)

Element stays in line but behaves like a block: can set sizes and margins. Perfect for buttons in text.

4. none vs visibility: hidden

• display: none: Element completely disappears as if it never existed in HTML. Neighbors close together.
• visibility: hidden: Element becomes invisible but continues to occupy space. Like an " invisible person " standing in line.