CSS removes the inline-block gap. CSS inline-block

CSS removes the inline-block gap. CSS inline-block

Recently, the inline-block element is often used for the layout of mobile pages, but there is inevitably a problem, that is, the gap between inline-block elements. These gaps may cause some layout problems and need to be removed. Here is a simple summary of the inline-block element and the method for removing the gap.

What is inline-block?

Inline-block is an inline block. In CSS element classification, it can be divided into three types: Intra-row or inline element, block-level element, and inline block element.

Inline block elements have the characteristics of inline elements and block-level elements: (1) they can be horizontally arranged (2) They can be used as block-level elements to set various attributes, for example: width, height, and padding.

Example 1: Define an inline element span as an inline-block Element

<Div id = "demo"> <span> I am a span </span> <span> I am a span </span> </div> # demo span {display: inline-block;
Background: # ddd;
}

:

Inline-block compatibility (1) inline level elements

For inline elements, all mainstream browsers can directly set the value of display to inline-block to define it as an inline block.

(2) block level elements

IE7 and the following browsers do not fully support block elements. They only support using display: inline-block to define an inline level element as an inline block.

IE7 and the following browsers can directly set the inline level element as an inline block, so we can work with it to set the block level element to inline first, and then trigger hasLayout of the element, make it have similar features as inline-block. You can write as follows:

Example 2:

<Div id = "demo"> <div> I am a div </div> <div> I am a div </div> # demo div {display: inline-block; * display: inline;/* IE7 hack */* zoom: 1;/* trigger hasLayout */}

IE7 and the following browsers: the block level element is converted to inline-block, and there is no gap between elements in IE7 and the following browsers. The inline level element is converted to inline-block, there is a gap between elements in IE7 and the following browsers. an inline level is converted to an inline-block element immediately after the block level is converted to an inline-block element, there is no gap between the two elements in IE7 and the following browsers. After the inline level is converted to the inline-block element, a block level is converted to the inline-block element, there is a gap between the two elements in IE7 and the following browsers; Any other browsers have a gap under any circumstances;

Inline-block element gap Origin

In example 1, defining the inline-block element will produce gaps. If the display: inline-block is not set, what will happen? As follows:

Example 3:

<Div class = "demo"> <span> I am a span </span> <span> I am a span </span> </div>. demo span {background: # ddd ;}

:

In the above example, there is still a gap between the span and the structure. Let's take a look at the effect of writing all span labels as one line:

<Div class = "demo"> <span> I am a span </span> <span> I am a span </span> </div>. demo span {background: # ddd ;}

:

We can see that the gap is caused by line breaks or carriage returns. As long as the label is written as a line or the label does not have spaces, there will be no gaps. However, this method is not reliable and is ineffective due to many uncontrollable factors, such as code generation tools, code formatting, or code modification by others. The following describes how to remove the gap and determine whether it is suitable for specific application scenarios.

Remove inline-block element clearance method (1) Remove spaces between tags

The reason for the gap between elements is the space between element tags. Removing the space will naturally disappear. Let's look at the following methods:

* Statement 1:

<Div class = "demo"> <span> I am a span </span> <span> I am a span </span> </div>

* Statement 2:

<Div class = "demo"> <span> I am a span </span> <span> I am a span </span> </div>

* Statement 3: Use HTML to annotate tags

<Div class = "demo"> <span> I am a span </span> <! --> <Span> I am a span </span> <! --> <Span> I am a span </span> <! --> <Span> I am a span </span> </div>

(2) Cancel tag Closure

<Div class = "demo"> <span> I am a span </div>

. Demo span {
Background: # ddd;
Display: inline-block;
}

Remove the end tag of the span tag, so that the gap is gone. To be compatible with IE6/IE7, the last tag must be closed.

<Div class = "demo"> <span> I am a span </span> </div>. demo span {background: # ddd; display: inline-block ;}

This method seems to be used on the Meituan webapp page. You can see:

Source code:

 

 

(3) Use font-size: 0;

Use font-size: 0 on the parent container to eliminate the gap. You can write as follows:

<Div class = "demo"> <span> I am a span </span> </div>. demo {font-size: 0 ;}. demo span {background: # ddd; display: inline-block; font-size: 14px;/* set the font size */}

For Chrome, there is a minimum font size limit by default. Considering compatibility, you need to cancel the font size limit and write it like this:

<Div class = "demo"> <span> I am a span </span> </div>. demo {font-size: 0;-webkit-text-size-adjust: none ;}. demo span {background: # ddd; display: inline-block; font-size: 14px;/* set the font size */}

 

Summary

On the Mobile Page, I prefer to set font-size: 0 to clear it. For the PC end, refer to the full-browser compatibility solution of doyoe.

The above is a summary of some problems encountered by the younger brother at work. If you have any shortcomings, please correct me.

 

Read more:

N methods for removing the spacing between inline-block elements;

How to solve the blank spacing of inline-block elements

Should I use inline-block instead of float?