Div标签不紧密贴合?隐形填充?

时间:2015-06-16 17:16:44

标签: html css css3

我有一个由内嵌块div组成的页面,它横跨屏幕。

Codepen在这里: http://codepen.io/gosusheep/pen/GJEPEV .

此处处理的输出:http://s.codepen.io/gosusheep/debug/GJEPEV .

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

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

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

但是当我在div周围放置一个边框来查看间距是否关闭时,它们之间会有一个不需要的空间。

任何人都知道为什么?

感谢您的时间。

2 个答案:

答案 0 :(得分:2)

div之间有空格(换行符)。当您将它们视为内联块时,这会转换为空格字符,就像在两个图像之间有空白区域一样。我认为放置< / div>< div>紧接着就会解决这个问题。

答案 1 :(得分:0)

根据CSS-Tricks建议的vals链接(请参阅Stephen Poley的回答),我决定采用修改CSS而不是HTML的路线。但这只是因为我使用HAML生成我的HTML。我可能已经删除了空白,而我可以选择。

div.container{
  font-size: 0;
}

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