Detailed explanation of several ways to remove the gap between inline-block elements in CSS

Recently, when working on mobile pages, inline-block elements are often used for layout, but there is an inevitable problem, which is the gap between inline-block elements. These gaps can cause some layout problems and need to be removed. Here is a brief summary of inline-block elements and how to remove gaps.

What is inline-block

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

Inline-block elements have the characteristics of both inline elements and block-level elements: (1) Elements can be arranged horizontally, and (2) They can be treated as block-level elements 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>I am a span</span>
    <span>I am a span</span>
    <span>I am a span</span>
    <span>I am a span</span>
</div>
#demo span{
    display:inline-block;
  background:#ddd;
}

Effect picture:

inline-block compatibility

(1) Elements of the inline level

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

(2) Block level elements

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

Since IE7 and below browsers support directly setting inline level elements to inline blocks, we can implement it in a workaround by first setting the block level element to inline, and then triggering the hasLayout of the element to give it similar features to inline-block. You can write:

Example 2:

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

IE7 and below: block level elements are converted to inline-block, and no gap appears between elements in IE7 and below; inline level elements are converted to inline-block, and gaps appear between elements in IE7 and below; immediately after the element converted from block level to inline-block, there is an element converted from inline level to inline-block, and no gap appears between the two elements in IE7 and below; immediately after the element converted from inline level to inline-block, there is an element converted from block level to inline-block, and a gap appears between the two elements in IE7 and below; gaps appear in all other browsers;

Origin of inline-block element gap

In Example 1, the element defined as inline-block will produce a gap. What will be the effect if display:inline-block is not set? as follows:

Example 3:

<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>

.demo span{
     background:#ddd;
}

Effect picture:

In the above example, there are still gaps without any processing on the span. What is the reason for this? Is it a structural problem? Let's see what the effect is if all span tags are written in one line:

<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>
.demo span{
         background:#ddd;
}

Effect picture:

You can see that the gap is caused by line feed or carriage return. As long as you write the tags on one line or directly without spaces between the tags, there will be no gaps. However, this method is not very reliable. There are too many uncontrollable factors that may cause failure, such as code generation tools, code formatting, or other people modifying the code. Various methods of removing gaps are listed below. Whether they are suitable depends on the specific application scenario.

Remove the gap between inline-block elements

(1) Remove spaces between tags

The gaps between elements appear because of the spaces between element tags. If you remove the spaces, the gaps will disappear. Let’s look at the following ways of writing:

*Writing method 1:

<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>

*Writing method 2:

<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>

*Writing method 3: Using HTML comment 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
        <span>I am a span
        <span>I am a span
        <span>I am a span
    </div>

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

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

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

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

source code:

(3) Use font-size:0;

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

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

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

<div class="demo">
        <span>I am a span
        <span>I am a span
        <span>I am a span
        <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 corresponding font size*/
    }

The above is a summary of knowledge about some problems encountered at work. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.