Visualize CSS Style display: inline Compared To display: inline-block

1. Visualize display: inline; border: 1px solid #000; Compared To display: inline-block; border: 1px solid #000;
2. Visualize display: inline; border: 1px solid #000; width: 200px; height: 200px; Compared To display: inline-block; border: 1px solid #000; width: 200px; height: 200px;
3. Visualize display: inline; border: 1px solid #000; margin: 100px; padding: 100px; Compared To display: inline-block; border: 1px solid #000; margin: 100px; padding: 100px;

1. Visualize display: inline; border: 1px solid #000; Compared To display: inline-block; border: 1px solid #000;

Paragraph.

Paragraph text before span style="display: inline; border: 1px solid #000;" text after.

Paragraph.

Paragraph text before span style="display: inline-block; border: 1px solid #000;" text after.

Paragraph.

2. Visualize display: inline; border: 1px solid #000; width: 200px; height: 200px; Compared To display: inline-block; border: 1px solid #000; width: 200px; height: 200px;

Paragraph.

Paragraph text before span style="display: inline; border: 1px solid #000; width: 200px; height: 200px;" text after.

Paragraph.

Paragraph text before span style="display: inline-block; border: 1px solid #000; width: 200px; height: 200px;" text after.

Paragraph.

3. Visualize display: inline; border: 1px solid #000; margin: 100px; padding: 100px; Compared To display: inline-block; border: 1px solid #000; margin: 100px; padding: 100px;

Paragraph.

Paragraph text before span style="display: inline; border: 1px solid #000; margin: 100px; padding: 100px;" text after.

Paragraph.

Paragraph text before span style="display: inline-block; border: 1px solid #000; margin: 100px; padding: 100px;" text after.

Paragraph.

Last reviewed/updated: 26 Oct 2016 | Published: 27 May 2015 | Status: Active

Learn Web Coding