As 145A_Block_Types_Layout.html was a shortened version of 145_Layout.html, this file 145B_Block_Types_Layout.html is further shortened by removing the inline style for display and replacing it. Howeever, the display did not overwrite the previous specification of inline.

The second and the third group does not work either.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

display: block

The display Property

display: inline

display: inline-block

display: block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam>nenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

The display Property

display: inline

display: inline-block

display: block

Block types - Refer to 145_Layout.html

The display: inline-block Value

The display Property

display: inline

display: inline-block

display: block

The display Property

display: inline

display: inline-block

display: block

The display Property

display: inline

display: inline-block

display: block