div 标签不紧密？隐形填充？答案

【问题标题】：Div tags not tightly fit? Invisible padding?div 标签不紧密？隐形填充？
【发布时间】：2015-06-17 04:37:19
【问题描述】：

我的页面由水平跨越屏幕的内联块 div 组成。

在#slider div 中，有几个 .slide-content div。每个 .slide-content 占据整个窗口大小。滚动时，它应该移动到下一页。

我想让 .slide-content div 彼此相邻。相反，根据 Chrome 的元素检查器，每个 div 之间的间距很小。

假设窗口大小为 1000。我希望第一个 div 位于 x:0，第二个 div 位于 x:1000，依此类推。这样，如果我执行 $(window).scrollLeft(1000)，它会滚动以使第二个 div 位于中间。

但是，当我在 div 周围设置边框以查看间距关闭的原因时，它们之间存在不需要的空间。

有人知道为什么吗？

感谢您的宝贵时间。

【问题讨论】：

标签： html css

【解决方案1】：

div 之间有空格（换行符）。当您将它们视为内联块时，这将转换为空格字符，就像您在两个图像之间有空格一样。我认为将

一个接一个地放置可以解决这个问题。

【讨论】：

这是 HTML 的怪癖之一：空格有时很重要。很好的收获。
感谢您的回复。我认为你可能是对的，但我一直无法轻易做到这一点。我正在使用 HAML 来处理 ruby 数组。我将尝试删除 JavaScript 中的 HTML 生成，看看是否可以在那里完成。
如果您可以更改 HTML，还有其他选择。见css-tricks.com/fighting-the-space-between-inline-block-elements

【解决方案2】：

根据对 CSS-Tricks 建议的 vals 链接（参见 Stephen Poley 的回答中的评论），我决定采用修改 CSS 而不是 HTML 的路线。但这仅仅是因为我使用 HAML 来生成我的 HTML。如果我可以选择，我可能会删除空格。

div.container{
  font-size: 0;
}

div.content{
  font-size: 16px; /*my default */
}

【讨论】：