Several CSS methods to remove gaps in inline-block elements_html/css_WEB-ITnose

Recently when making mobile pages, inline-block elements are often used for layout, but inevitably one problem will be encountered, which is the gap between inline-block elements. These gaps will cause some layout problems, and the gaps need to be removed. Here is a brief summary of inline-block elements and methods for removing gaps.

What is inline-block

inline-block is an inline block, which can be divided into three types in the CSS element classification: inline elements or inline elements, blocks level elements, and inline block elements.

Inline block elements have the characteristics of inline elements and block-level elements: (1) elements can be arranged horizontally (2) can be used as a block-level element to set various attributes, such as: width , height, padding, etc.

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

<div id="demo">    <span>我是一个span</span>    <span>我是一个span</span>    <span>我是一个span</span>    <span>我是一个span</span></div>#demo span{    display:inline-block;　　 background:#ddd;}

Rendering:

Inline-block compatibility

(1) Inline level elements

For inline elements, all mainstream browsers support directly setting the display value to inline-block. Define it as an inline block.

(2) Block level elements

IE7 and below browsers do not fully support block elements (block elements). They only support using display:inline-block to define one. Elements at the inline level are inline blocks.

Since IE7 and below browsers support directly setting the inline level element to an inline block, we can work around it by setting the block level element to inline first, and then trigger the hasLayout of the element to make it Has similar characteristics to inline-block. You can write it like this:

Example 2:

<div id="demo">    <div>我是一个div</div>    <div>我是一个div</div>    <div>我是一个div</div>    <div>我是一个div</div></div>#demo div{    display:inline-block;    *display:inline; /*IE7 hack*/    *zoom:1; /*触发hasLayout*/}

IE7 and below browsers: block level elements are converted to inline-block, under IE7 and below browsers There is no gap between elements; inline level elements are converted to inline-block, and gaps appear between elements in IE7 and below browsers; immediately after the element whose block level is converted to inline-block, there is an element whose inline level is converted to inline-block. , there will be no gap between these two elements in IE7 and below browsers; immediately after the element converted from inline level to inline-block, there is an element converted from block level to inline-block. In IE7 and below browsers, these two elements A gap appears between them; gaps appear in other browsers under any circumstances;

The origin of the gap in inline-block elements

In example 1, defining an inline-block element will produce a gap, if it is not set display:inline-block, what will be the effect? As follows:

Example 3:

<div class="demo">        <span>我是一个span</span>        <span>我是一个span</span>        <span>我是一个span</span>        <span>我是一个span</span></div>.demo span{     background:#ddd;}

Rendering:

In the above example, nothing is done to span There are still gaps in the processing. What is the reason? Is it a structural problem? What is the effect if all span tags are written in one line? Let’s take a look:

<div class="demo">        <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>    </div>.demo span{         background:#ddd;}

Rendering:

You can see it Gaps are caused by line feeds or carriage returns. As long as the label is written on one line or the label has no spaces, there will be no gaps. However, this method is not very reliable, and there are too many uncontrollable factors that lead to failure, such as code generation tools, code formatting, or other people modifying the code, etc. Listed below are various methods for removing gaps. Whether they are suitable depends on the specific application scenario.

Method to remove gaps between inline-block elements

(1) Remove spaces between labels

The reason for the gaps between elements is the spaces between element labels. Remove the spaces and the gaps will disappear naturally. Let’s look at the following writing methods:

* Writing method one:

<div class="demo">        <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>    </div>

* Writing method two:

<div class="demo">        <span>我是一个span        </span><span>我是一个span        </span><span>我是一个span        </span><span>我是一个span</span>    </div>

*Writing method three: Use HTML comment tags

<div class="demo">        <span>我是一个span</span><!--         --><span>我是一个span</span><!--         --><span>我是一个span</span><!--         --><span>我是一个span</span>    </div>

(2) Cancel tag closure

<div class="demo">        <span>我是一个span        <span>我是一个span        <span>我是一个span        <span>我是一个span    </div>

.demo span{
background :#ddd;
display: inline-block;
}

Remove the end tag of the span tag so that there is no gap. In order to be compatible with IE6/IE7, the last tag needs to be closed.

<div class="demo">        <span>我是一个span        <span>我是一个span        <span>我是一个span        <span>我是一个span</span>    </div>.demo span{         background:#ddd;         display: inline-block;        }

This method seems to be used in the Meituan webapp page. You can take a look at:

Source code:

(3) Use font-size :0;

Use font-size:0; on the parent container to eliminate the gap, you can write:

<div class="demo">        <span>我是一个span        <span>我是一个span        <span>我是一个span        <span>我是一个span</span>    </div>    .demo {font-size: 0;}    .demo span{         background:#ddd;         display: inline-block;         font-size: 14px; /*要设置相应的字号*/    }

For Chrome, its default is the smallest Font size restrictions, considering compatibility, need to cancel the font size restrictions, write like this:

<div class="demo">        <span>我是一个span        <span>我是一个span        <span>我是一个span        <span>我是一个span</span>    </div>    .demo {font-size: 0;-webkit-text-size-adjust:none;}    .demo span{         background:#ddd;         display: inline-block;         font-size: 14px; /*要设置相应的字号*/    }

Summary

on the mobile page , I personally prefer to set font-size:0 to clear it. For PC, you can refer to doyoe’s full browser compatibility solution.

The above is a summary of the knowledge I encountered when I encountered some problems at work. Any shortcomings are welcome to correct.

If you have any suggestions or questions, please leave a message for discussion.

If you think the article is good, please click on the recommendation in the lower right corner.

More reading:

N ways to remove the spacing between inline-block elements;

How to solve the white space of inline-block elements

Should Inline-block should not be used instead of float