About the pitfalls encountered by CSS3 inline-block

Many people may not be familiar with inline-block. In terms of layout, many people use flex or float. There is no doubt that flex is very powerful, but its compatibility is not very satisfactory. Although float is very compatible, it is not very satisfactory. I feel that clearing floats is very troublesome, so I used inline-block as the layout for the homepage navigation display of some large websites, such as our segmentfault. I thought that inline-block can be used for a while, but suddenly I found that there are also some small problems in it. , first post the 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>

At this time we use inline-block for layout, and the magic 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 three p's are side by side. Because the three p's have become inline elements, they should also be side by side, but...
appears here Two questions: There is a gap between

1. p

2. There is a gap between the child p and the parent p A 4px spacing

The reason why this problem occurs here is because the horizontally rendered elements of inline-block are displayed with line breaks or separated by spaces. In some cases, there will be a gap between

Solution to the gap between p

One method I 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, the child p and the parent There is no spacing between p, which shows that our problem is not here.

I was referring to Zhang Xuxin’s blog and I was deeply impressed and thought that this method is the best:

Add such css attributes to the parent p

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

po 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 is another question, what is -webkit-text-size-adjust?? ??

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

Haha, this solves our problem

Finally, let’s talk about the compatibility of inline-block: refer to this article
-->
IE6 and IE7 do not recognize inline-block but can trigger block elements. Other mainstream browsers support inline-block. This is enough. IE6 and 7 will not be considered. You know the reason...

Related recommendations:

display: inline-block and float in css Differences used when making elements line up

css: block, inline and inline-block usage and differences

css solution display:inline- block; method of laying out the gaps created

The above is the detailed content of About the pitfalls encountered by CSS3 inline-block. For more information, please follow other related articles on the PHP Chinese website!