html5 - li元素inline-block横向排列，出现了未知间隙

Question

Code {代码...} {代码...} 通过上面的代码，我想将四个li元素横向排列， li width：200px（200*4=800px）;左右padding为25px（25*8=200px）;总和1000px；但是实际却超过了1000px。 第一个li是正常的 第二个li开始...

PHP中文网 · Answer

It is caused by carriage return and line feed. There are many solutions. I have found the root cause. You can delete the line feed. You can change the font-size:0 of ul, then li, and write the font size you need (chrome should have the minimum font size. 12), and the margin is set to a negative value

PHP中文网 · Answer

The

tag is set to display: inline-block and a newline character is added after the end tag, which will generate a blank character. This newline character is just one character. will take up position.

IE browsers above IE8 and standard browsers such as FF and chrome will produce a blank bug. Chrome displays an 8px blank bug, but other browsers display a 4px blank bug.

Method 1: Remove the blank space in the middle of
in the code
Method 2: Solve by negative margin margin-right: -4px; *margin-right: 0px; chrome cannot be solved if it is 8px (ps: I tried method 2 and it can solve chrome.). *It is ie6 or ie7. This is a parsing bug using ie
Method 3: Set the parent element font-size: 0; this cannot solve Safari, letter-spacing: -4px; (adjust the character spacing and remove it) this can solve Safari; combine the two
Method 4: Remove the

大家讲道理 · Answer

Please set the parent element
font-size:0;

黄舟 · Answer

I tried it

  * { margin: 0; padding: 0; }
  section { width: 1000px; border: 1px solid #000; }
  li { text-align: center; list-style: none; display: inline-block; padding: 25px; width: 150px; height: 100px; line-height: 100px; margin-right: -8px; }
  



  
    1
    2
    3
    4
    5

This margin-right:-8px;
Compatible with chrome firefox IE Edge 360

PHP中文网 · Answer

In order to keep the html structure good-looking, my common approach is to set font-size: 0 on the parent element

伊谢尔伦 · Answer

Since you are using Li, why not use float:left. to achieve the function you want.
In addition, this is not an unknown gap, but its gap width has different widths in different browsers, so it cannot be achieved by modifying the offset. In fact, my common method is to not add closing tags to the first few. .
For example

你好
hello
world

Add a closing tag to the last tag to prevent problems.
This can perfectly solve the gap problem.

PHP中文网 · Answer

I would like to ask what the measuring tool on that page is called

阿神 · Answer

This is the white space problem of inline-block

These are some whitespace characters, which are invisible, but will occupy a certain amount of widthetc.

There are many solutions
A certain method comes from http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  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;
}

For specific processing methods, you can read the article on w3cplus on how to solve the white space of inline-block elements

怪我咯 · Answer


        
            我的首页
            GitHub
            about me
            所有内容

Owner, when you converted 块级元素 to 行内元素, did you ever think that 空格 would affect the layout?
Just like

yyyxxxxx


yyy xxxxx



 yyy
 xxxxx

Do these three situations display the same thing?
If you really understand the example I gave you, then your problem has been solved.

Conclusion

This 未知间隙, 就是空格, which is your 换行符, block-level elements can ignore line breaks, but inline elements will not.

大家讲道理 · Answer

Inline-block interval problem

通过上面的代码，我想将四个`li`元素横向排列，

第一个li是正常的

第二个li开始出现偏移，但预设border，margin都为0；

之后我开始凑数，想找出这个间隙的大小，结果发现：

Chrome（1015px）：

Firefox（1015px）：

Chrome（1024px）：

纠结中...寻求大神指导几句，这个间隙到底是什么东西

Conclusion