Block types - Refer to 145_Layout.html

I shall refer to W3Schools.com to learn about block. I modified the style specifications once I noticed that only the 'display' changed.

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block:

The display Property

display: inline

display: inline-block

display: block

I stopped here: ECLoc8539, P267