[英]Gap Between Divs - Not Understanding Why It Is There
I'm designing a layout to be used on a social website. 我正在设计要在社交网站上使用的布局。 The site allows CSS/HTML elements.
该站点允许CSS / HTML元素。 In my design there is a gap between two of my stacked divs.
在我的设计中,两个堆叠的div之间存在间隙。 There is no gap in my code so I cannot understand why it is there.
我的代码没有缝隙,所以我不明白为什么会出现缝隙。
Here is a screenshot: The black space between the header image and menu is the gap. 这是屏幕截图:标题图像和菜单之间的黑色空间是空白。
Here is my HTML: 这是我的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>
And my CSS: 而我的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;
}
Tell the image to be a block level element like so: 告诉图像是一个块级元素,如下所示:
img {
display: block;
}
Better yet, give it a class so that you don't style all the images on the page. 更好的是,给它一个类,以免对页面上的所有图像进行样式设置。 Because the image is an inline-block element it's subject to line-height, which is what I think is happening here.
因为图像是行内块元素,所以它受线高的限制,这就是我认为正在发生的情况。
EDIT: http://jsfiddle.net/z91kwzhw/1/ 编辑: http : //jsfiddle.net/z91kwzhw/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.