How to resolve whitespace spacing for inline-block elements

There is a lot of discussion about using inline-block instead of float, most often by using inline-block instead of float for layout, or using Inline-block to achieve the center effect of the element. The previous "CSS3-made pager" article is the use of the Inline-block produced by the center effect, but left a problem, that is, the use of inline-block between the elements there will be "4px" gap between the space. So today we're going to talk about this "4px" problem together.

First of all, let's look at a demo:

HTML Markup

<ul>  <Li>Item1</Li>  <Li>Item2</Li>  <Li>Item3</Li>  <Li>Item4</Li>  <Li>Item5</Li></ul>

CSS Code

*{margin:0;padding:0;}ul{List-style:None outside None;padding:10px;background:Green;text-align:Center;}ul Li{Display:Inline-block;*display:inline;Zoom:1;background:Orange;padding:5px;}

Above the demo effect, it is obvious that there is a "4px" gap between the elements of Inline-block:

The above is: ie8-9, Firefox, Safari and other browser effects, in other words, this is only in these browsers will appear. Let's talk about several ways to solve this "4px" (8px under Chrome):

Method One: Change the HTML structure

The simple way is to change the structure of the HTML, you can use any of the following methods can achieve the effect:

Structure One:

<ul>  <li>  item1</li><li>  item2</li><li>  item3</li> <li>  item4</li><li>  item5</li>  </ul>

This approach is close to the way the label wraps and is closer to reading.

Structure two:

<ul>  <Li>Item1</Li><Li>Item2</Li><Li>Item3</Li><Li>Item4</Li><Li>Item5</Li>  </ul>

Structure Two and structure one is almost the same, the ">" of the end tag becomes the starting label of the other line.

Structure Three:

<ul>  <Li>Item1</Li><!--   -<Li>Item2</Li><!--   -<Li>Item3</Li><!--   -<Li>Item4</Li><!--   -<Li>Item5</Li>  </ul>

The method of structure three uses the method of HTML annotation, which I think people are not very common, but also can solve the problem that we need to solve.

Structure four:

<ul><Li>Item1</Li><Li>Item2</Li><Li>Item3</Li><Li>Item4</Li><Li>Item5</Li></ul>

Structure Four, I think is commonly used to solve such problems, let's look at the following methods to write the effect:

One way to do this is by labeling the solution, although the problem is solved, but can be said not to be a skill. And the above method is only suitable for writing static pages, once your HTML is not your own writing, but background generation, such as CMS, tag background generation, at this time, I think we have to squalling again, this can do? In fact, in addition to the above method, we can also use CSS to solve.

Method Two: Negative margin

Many places discuss the use of negative margin to solve, for example:

{        font-size: 12px;    } {margin-right: -4px;                      *margin-right: 0;    }

This workaround is not perfect, and if your parent element is set to a different font size, your " -4px" may not solve the problem. Besides, you need to set a negative margin value in chrome to achieve the same effect.

Of course, some articles are described using " -0.25em" to solve, which is also with the element's font size has a great relationship. so I personally recommend not using negative margin to solve this problem.

Method Three: Set the parent element font to 0

The third method sets the parent element's font to "0", and then resets the font size required on the "Inline-block" element.

ul{List-style:None outside None;padding:10px;background:Green;text-align:Center;font-size:0px; }ul Li{Display:Inline-block;*display:inline;Zoom:1;background:Orange;padding:5px;font-size:12px;}

This is done in browsers such as Firexfox,chrome, but there are still problems with Safari:

In this case, the method of three is not a good way to use, do not have to consider the people themselves.

Method four: Missing end tag

To be honest, this approach goes back to method one and hands on the HTML tag. is to let the "inline-block" element lose the Close tag

<ul>  <Li>item1<Li>item2<Li>Item3<Li>ITEM4<Li>ITEM5</ul>

The style is basically the same, let's look at the effect:

Although this method can achieve the compatibility of each browser, but there is a premise, that is, "DOCTYPE" to choose the right, in the "XHTML" can be the problem again.

Method Five: JQuery method

Finally, we offer you a way to jquery:

HTML Markup

<ulclass= "Removetextnodes">  <Li>Item1</Li>  <Li>Item2</Li>  <Li>Item3</Li>  <Li>Item4</Li>  <Li>Item5</Li></ul>

CSS Code

ul{List-style:None outside None;padding:10px;background:Green;text-align:Center;font-size:12px;}ul Li{Display:Inline-block;*display:inline;Zoom:1;background:Orange;padding:5px;}

JQuery Code

$ ('. Removetextnodes '). Contents (). Filter (function() {    returnthis. NodeType = = 3;
}). Remove ();

The last method is to change the value of "NodeType" through jquery to achieve the effect we need.

There are a number of ways to do this, but to be compatible with multiple browser versions, not every method is practical, and the previously used method, this test is not compatible with all browsers. In order to be compatible with all browsers, the individual believes that the HTML tag to do some processing, or the last method, through "jQuery" to change the "nodeType" value to achieve the effect. For this "inline-block" between the spacing there are several articles have been introduced, but the method, and the above described in the basic test, the specific how to use, we still according to their own needs to choose or deal with.

Extended reading:

1. Fighting the Space between Inline Block Elements
2. Display:inline-block et les espaces indésirables
3. n method of removing spacing between inline-block elements

So about the "inline-block" How to remove the spacing, today this is the case, I hope this article to like to use inline-block children's shoes to help. If you have a better idea, remember to share it with us, and feel free to leave your experience in the comments below, or correct the mistake above.

Update: fully compatible style resolution

After the expert pointing, using pure CSS or found a compatible method, is to set font-size:0 in the parent element, to be compatible with chrome, and use letter-space:-n px to compatible with Safari:

. Finally-solve{letter-spacing:-4px;/*depending on the font size, you may need to make some adjustments*/word-spacing:-4px;font-size:0;}. Finally-solve Li{font-size:16px;letter-spacing:Normal;word-spacing:Normal;Display:Inline-block;*display:inline;Zoom:1;}

Transferred from:w3cplus

How to resolve whitespace spacing for inline-block elements