Differences between inline, block, and inline-block

When we use firbug to browse other websites, we will find that designers use inline-block in many places. We all know that inline declares that div is an inline object and block is a block object. What does inline-block mean? Next, let's test the differences and functions of the three:

< html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title > Differences Between inline, block, and inline-block </ title > < style > .a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </ style > </ head > < body > < span class = "a" > inline </ span >inline < span class = "b" > block </ span >block < span class = "c" > inline-block </ span >inline-block </ body > </ html >

We found that it is useless to set the height and width for the inline object inline, which is caused by the internal element width and height + padding. Observe the front and back elements of the inline object and we will find that Inline is not only exclusive to a row, but other elements will keep behind it.

Block object block can be set to a wide height, but its actual width and height are its own width and height + padding. Observe the front and back elements of the block and we will find that the block occupies a single row.

When we see this, we will think, what if we need a div with a width and height, and do not want it to exclusive a row?

At this time, we need to use the inline-block. Then, we will find that the inline-block has the wide and high features of the block and has the characteristics of the same element of the inline.

 

Finally, I would like to remind you that padding in IE6/7 has no effect on the width and height of inline. See: