← Back to Menu

Display & Visibility

Control how elements participate in the document flow and whether they are rendered.

1. Display Flow: Inline vs Block

Change the display property of the highlighted elements to see how they interact with surrounding content.

Set Display:

Inline

Elements do not start on a new line and only take up as much width as necessary. Width and height properties have no effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Target 1 Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Target 2 Vivamus suscipit tortor eget felis porttitor volutpat.

2. Visibility vs Display None

Observe the difference in document layout when an element is hidden.

Action:

Visible

The element is fully visible and participates in the document layout.

Box A
Box B (Target)
Box C