Divs之间的差距-无法理解为什么存在

Question

我正在设计要在社交网站上使用的布局。 该站点允许CSS / HTML元素。 在我的设计中，两个堆叠的div之间存在间隙。 我的代码没有缝隙，所以我不明白为什么会出现缝隙。

这是屏幕截图：标题图像和菜单之间的黑色空间是空白。 在此处输入图片说明

这是我的HTML：

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="vfErin.css">
</head>
<html>
<body>
<div id="customProfile">
 <div id="customHeader">
  <img src="http://assets.jollyrogerpcs.com/vampirefreaks/axel/cover.png" width="100%">
 </div>
 <div id="customMenu">
  <a href="#">VF Home</a>
  <a href="#">Gallery</a>
  <a href="#">Journal</a>
  <a href="#">Add Me</a>
  <a href="#">Rate & Comment</a>
 </div>
</div>
</body>
</html>

而我的CSS：

/* 
#67C8FF neon-blue 
#83F52C neon-green
*/
* {
   padding: 0;
   margin: 0;
   text-decoration: none;
   border: none;
   outline: none;
   list-style: none;
   transition: all 0.5s;
}
body {
   background-color: #000;
   text-align: center;
}
#customProfile {
   width: 900px;
   margin: 0 auto;
   text-align: left;
   border-left: 1px solid #67C8FF;
   border-right: 1px solid #67C8FF;

}
#customMenu {
   width: 900px;
   font-size: 0pt;
}
#customMenu a:link, #customMenu a:visited {
   display: inline-block;
   width: 20%;
   text-align: center;
   background-color: #67c8ff;
   font-size: 14pt;
   height: 30px;
   line-height: 30px;
}

Answer 1

告诉图像是一个块级元素，如下所示：

img {
    display: block;
}

更好的是，给它一个类，以免对页面上的所有图像进行样式设置。 因为图像是行内块元素，所以它受线高的限制，这就是我认为正在发生的情况。

编辑： http : //jsfiddle.net/z91kwzhw/1/

Divs之间的差距-无法理解为什么存在

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-05-23 03:26:01

Divs之间的差距-无法理解为什么存在

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-23 03:26:01

解决方案1
2 已采纳 2015-05-23 03:26:01