Reflection on gap caused by display: inline-block

I. Fuse

Yes, there is always a kind of attribute that can help you easily find shortcuts, but it can also add to your troubles. For example, the main idea of this article is display: inline-block. The frontend knows that the object is presented as an inline object, but the object content is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed. However, unfortunately, it is not supported by all browsers, such as IE6, 7, and Firefox, which is a little older than Firefox, because Firefox's old version has almost disappeared from the market, therefore, Firefox supports display: inline-block in name. In addition, great chrome, opera, and Safari support well. However, we can still use hack to make IE6 and IE6 cool-hearted, such:

<ul class="demo01">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

.demo01{width:327px; margin:0 auto;}.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999;}

Display: inline-block only triggers layout in IE, and it is a row layout. After triggering, the block element is still a row layout. Therefore, the block element must be presented as an inline object. display: inline plays this role (* is only recognized by IE6 and 7), and then triggers layout through ZOOM: 1. You can implement the so-called inline-block. But this is far from the end. This guy is faced with many things that need to be handled by you. For example, there will be a default margin (except IE6 and 7 ). Before this problem occurs, you may need to relax and take a look at the following phenomenon.

Ii. What triggered the gap

As mentioned above, although inline-block has gaps by default, so when we try to set a separate margin-bottom or padding-bottom for one of the elements (of course, you can also try to set margin-top or padding-top ), it presents the following models:

What does this mean? We can use the vertical-align: Top; attribute to eliminate the vertical gap.

So many odd people of the opposite sex make us curious and puzzled about CSS, maybe it is because of this that floating layout becomes the mainstream. As mentioned in the first part of the article, does inline-block allow spaces? After some analysis, we were surprised to come up with the answer: the culprit is a blank character including line breaks.

So we immediately eliminate spaces, line breaks, and other guys, and the results verify the correctness of this inference. But this is not a good solution, because it is difficult to avoid spaces such as line breaks between complicated HTML combinations. The people who need to ring the bell, and CSS should solve the problem by CSS itself, right.

Iii. Final unification

Maybe it is not necessarily a good thing to be too long-winded, so let's take a look at the final model we need!

.demo02{width:306px; margin:0 auto; font-size:0;}.demo02 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top; font-size:12px;}

Font-size: 0 is used to shake hands on this issue. Its function is to make unnecessary blank spaces disappear. Of course, this will cause the text of all child elements to disappear together, therefore, you need to add a font-size: 12px to the child element.