Display Property Demos: inline vs block

Display: Inline

This is an inline span within a paragraph.

Inline elements stay on the same line and don't break flow.


<p>This is <span style="display:inline; background:#ffeb3b; padding:4px;">an inline span</span> within a paragraph.</p>
<p>Inline elements stay on the same line and don't break flow.</p>

Display: Block

Block Element 1
Block Element 2

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


<div style="display:block; background:#03a9f4; color:white; padding:10px;">Block Element 1</div>
<div style="display:block; background:#4caf50; color:white; padding:10px;">Block Element 2</div>
<p>Block elements take full width and start on a new line.</p>

Display: Inline-Block

Inline-Block 1
Inline-Block 2

Inline-block allows setting width/height while keeping elements on same line.


<div style="display:inline-block; background:#e91e63; color:white; padding:10px;">Inline-Block 1</div>
<div style="display:inline-block; background:#9c27b0; color:white; padding:10px;">Inline-Block 2</div>
<p>Inline-block allows setting width/height while keeping elements on same line.</p>