差距在DIV顶部和底部，尽管边距为0

问题描述：

我正在使用HTML项目，我在显示div时遇到了一些问题。差距在DIV顶部和底部，尽管边距为0

我创建了一个“window”div，里面有一个“windowContent”div。 “窗口”div有一个边框图像，“windowContent”只有一个白色背景。

问题在于顶部和底部有间隙。

Result: http://i58.tinypic.com/35ckjk6.png 
Code: http://jsfiddle.net/mp4a0do3/

我试图设置页边距为0px，但仍然有同样的问题。

任何帮助表示赞赏。

请务必在问题中发布您的代码。 – j08691 2014-11-20 18:48:37

它被称为“相邻边界”......“h3”的“边缘顶部”。最后一个'p'的'margin-bottom'与周围'div'元素的边距合并。 – CBroe 2014-11-20 18:52:26

我明白了。所以h3的边缘问题导致了这个问题。感谢澄清。 – 2014-11-20 18:58:32

答

添加到您的CSS去除填充第一H3的&保证金和最后P元素：

.windowContent :first-child { 
    padding-top: 0; 
    margin-top: 0; 
} 
.windowContent :last-child { 
    padding-bottom: 0; 
    margin-bottom: 0; 
}

（或创建新类做同样的，并将其应用到2组相同的元素。）

需要注意的是很容易上看到差距，通过使用浏览器的开发者工具在Firefox检查元素（或萤火虫从何而来。）

差距在DIV顶部和底部，尽管边距为0

相关推荐