nowrap内嵌块之间的空间 [英] Space between nowrap inline blocks

问题描述

使用 white-space：nowrap

/ code>，它工作得很好，但在一个元素和另一个元素之间有一个几个像素的随机空间：

  body {margin：0; padding：0; } 
＃container1 {white-space：nowrap; position：absolute; width：100％; } 
＃container1 div {display：inline-block; width：100％; height：200px; } 
  

 < div id =container1> 
< div style =background：red;>< / div> 
< div style =background：yellow;>< / div> 
< div style =background：green;>< / div> 
< div style =background：blue;>< / div> 
< / div> 
  

这是 jsBin演示。

它没有填充，没有边距，没有边框，没有偏移。

解决方案

这是因为inline（-block）元素之间的空格字符（换行符和几个标签计为空格）以这种方式评论空间：

 < div style =background：red;>< / div> ;！ -  
  - >< div style =background：yellow;>< / div><！ -  
  - >< div style = ：green;>< / div><！ -  
  - >< div style =background：blue;>< / div> 
  

在线演示 。

实际上，这不是一个错误，这是内联元素的正常行为;就像在一行文本旁边放置一个图像，或者在输入元素旁边放置一个按钮。

有几种方法可以删除内联（-block）元素：

• 最小化HTML


• 负边距


• 注释掉空白区域


• 中断结束标记


• 将父项的字体大小设置为零，

$ b p>查看 Chris Coyier的文章，或这些SO类似主题：

• 如何清除inline-block元素之间的空格？


• 内嵌块列表项之间的空间


• 如何清除隐形空间 ;从HTML

I want to have several block elements next to each other, which take the full browser width.

With white-space: nowrap, it works quite well, but there is a random space of a few pixels in between one element and another:

body { margin: 0; padding: 0; }
#container1 { white-space: nowrap; position: absolute; width: 100%; }
#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1">
    <div style="background: red;"></div>
    <div style="background: yellow;"></div>
    <div style="background: green;"></div>
    <div style="background: blue;"></div>
</div>

Here is the jsBin Demo.

It is no padding, no margin, no border, no offset.

解决方案

That's because of a space character between inline(-block) elements (a line break and a few tabs counts as a space), This could be fixed by commenting that space out this way:

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

Online Demo.

Actually, it's not a bug, it's the normal behavior of the inline elements; Just like when you place an image next to a line of text, or put a button next to an input element.

There are couple of ways to remove the space between inline(-block) elements:

• Minimized the HTML
• Negative margins
• Comment the white space out
• Break the closing tag
• Set the font size of the parent to zero then reset that for children
• Float the inline items instead
• Use flexbox

Check the Chris Coyier's Article, or these similar topics on SO:

• Why is there a gap between image and navigation bar
• How to remove the space between inline-block elements?
• A Space between Inline-Block List Items
• How to remove "Invisible space" from HTML

这篇关于nowrap内嵌块之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！