How to solve the blank spacing and inline-block spacing of inline-block elements

How to solve the blank spacing and inline-block spacing of inline-block elements

In the morning, someone raised the following question in his blog: "The li element inline-block is horizontally arranged and there is an unknown gap ", I believe you have encountered this situation when writing pages.

I usually float li in this case, so there is no gap. However, there are still many solutions to this unknown gap. There are several solutions available on w3cplus. Here we will summarize.

First look at the structure:

<ul>  <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;}ul li {  display: inline-block;  *display: inline;  zoom: 1;  background: orange;  padding: 5px;}

 

There is a blank "4px" between the inline-block elements:

The first is to change the html structure. 1:

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

 

This method is close to the syntax of the label line feed format and closer to reading.

Structure 2:

Structure 2 is almost the same as structure 1. The ">" of the end tag is the start tag of another row.

Structure 3:

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

 

The method of structure 3 uses the html annotation method. This method is not very common, but it can also solve the problem we need to solve.

Structure 4:

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

 

Structure 4: I think it is a common solution to this problem.

Method 2: negative margin

Negative margin is used in many discussions, for example:

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

 

This solution is not perfect. If the font size of your parent element is different, your "-4px" may not solve the problem. In Chrome, you need to set another negative margin value to achieve the same effect.

Of course, some articles use "-0.25em" to solve the problem, which is also highly related to the font size of the element. Therefore, I personally recommend that you do not use negative margin to solve this problem.

Method 3: Set the font of the parent element to 0.

The third method is to set the font of the parent element to "0", and then reset the font size 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;}

 

In this way, Firexfox, chrome and other browsers achieve the effect, but the problem still exists in Safari:

Method 4: The end tag is lost.

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

 

However, this method is not recommended.

Method 5: jquery Method

Html structure:

<ul class="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() {return this.nodeType === 3;}).remove();

 

The contents () method is used to find all child nodes (including text nodes) inside the matching element ). If the element is an iframe, search for the document content.
Filter Method: filter the set of elements that match the specified expression. This method is used to narrow the matching range. Multiple Expressions are separated by commas.

The nodeType attribute returns the node type of the specified node with a numeric value.
If the node is an element node, the nodeType attribute returns 1.
If the node is an attribute node, the nodeType attribute returns 2.
If the content of the text in the element or attribute is not specified, the nodeType attribute returns 3.

Fully compatible style Solutions

Using pure CSS, we found the compatibility method, that is, setting font-size: 0 in the parent element to be compatible with chrome, and using letter-space:-N px to be compatible with safari:

. Finally-solve {letter-spacing:-4px;/* adjust the font size based on the font size. */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 ;}

 

Address: http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements