The difference between inline, block and Inline-block _css

When we use Firbug to browse other people's websites, we find that designers use inline-block in many places. We all know that inline is a declaration div is an inline object, block is a declaration of the object, then what the Inline-block meaning, that is, inline and block. Next, let's take a test to understand the difference and role of the three: 1 2 3 4 5 6 7 8 9 (+) < html xmlns = "Http://www.w3.org/19 99/xhtml "> < head > < meta HTTP-EQUIV =" Content-type "Content =" text/html; Charset=utf-8 "/> < title >inline, block, Inline-block difference </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 >

We find that the inline object inline it is not used to set the height and width, which causes it to widen and become larger because of the +padding of the inner element. Observe the front and back elements of the inline object we'll find that inline not only has a single line, but other elements follow.

Block object blocks can be set wide, but its actual width is itself wide and high +padding. Look at the front and back elements of the block and we'll see that the block takes up a separate line.

When we see this, we think, what if we want the div to be wide, and we don't want it to monopolize the line.

This time we need to use Inline-block, and then look at the above figure, we will find that Inline-block is a block of the wide and high characteristics and has the inline characteristics of the peer element.

Finally, the padding of the IE6/7 under the inline is not affected by the wide height.