About CSS3 's Inline-block encounters the pit

About Inline-block probably a lot of people are unfamiliar, layout this aspect many people use is flex or float, Flex is very strong undoubtedly but about compatibility is not very satisfying, and floating although very compatible but feel clear floating is very troublesome, in this I in some large-scale website, For example, our Segmentfault home navigation display with the layout is Inline-block, think Inline-block can be a wave, but suddenly found there are also some small problems, first PO out code

<p style= "Background-color:green" >      <p style= "width:40px;height:30px;background-color:red;" >      </p>      <p style= "width:40px;height:30px;background-color:red;" >      </p>      <p style= "width:40px;height:30px;background-color:red;" >      </p></p>

That's when we take the Inline-block to the layout, and the magical thing happens.

<p style= "Background-color:green;" >      <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>      <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>      <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>    </p>

The original 3 p-side-by, because 3 p becomes the inline element, so should also side-by, but ....
There are two questions:

1. There is a gap between p

2. There is a 4px spacing between the child P and the parent P

This problem occurs because of the spacing between elements that are present in the inline-block level, in the case of line breaks or spaces separated

The method of resolving the spacing between P

One of the ways I've tried here is to set Margin-right to a negative value,

<p style= "Background-color:green" >      <p style= "Width:40px;height:30px;background-color:red;display: Inline-block;margin-bottom:-4px;margin-right:-4px ">      </p>      <p style=" width:40px;height:30px; Background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px ">      </p>      <p Style= "Width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px" >      </p>    </p>

Here we can see that the first P and the second p still have a 1px spacing, while the second and third have no spacing, and the child P and the parent p have no spacing, stating that our problem is not here

I am deeply impressed by the Zhang Xuxin of the Great God blog that this approach is best:

Add CSS properties like this to the parent P

Font-size:0-webkit-text-size-adjust:none;

PO Out Code

<p style= "Background-color:green;font-size:0;-webkit-text-size-adjust:none;" >        <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>        <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>        <p style= "Width:40px;height:30px;background-color:red;display:inline-block;" >        </p>

So there's one more question, what is-webkit-text-size-adjust????

WebKit kernel browser (chrome), when the Chinese font-size defined in the CSS is less than 12px, the browser still uses 12px, then can use-webkit-text-size-adjust:none;

Haha, this will solve our problem.

Finally, Inline-block Compatibility: Refer to this article
-
IE6, IE7 does not recognize Inline-block but can trigger block elements. Inline-block is supported by other major browsers. That's enough, ie6,7 don't think about it, why, you know ...