Divs之間的差距-無法理解為什么存在
[英]Gap Between Divs - Not Understanding Why It Is There
問題描述
我正在設計要在社交網站上使用的布局。 該站點允許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;
}
1 個解決方案
解決方案1
2 已采納 2015-05-23 03:26:01
告訴圖像是一個塊級元素，如下所示：
img {
display: block;
}
更好的是，給它一個類，以免對頁面上的所有圖像進行樣式設置。 因為圖像是行內塊元素，所以它受線高的限制，這就是我認為正在發生的情況。
為什么這兩個div之間存在差距
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.