元素之間不需要的空白
[英]Unwanted white-space between elements
問題描述
為什么以下CSS代碼為什么在blue（中間）元素的末尾和last（右邊）元素的末尾之間創建空白？
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>A test page</title>
<style type="text/css">
body {
margin: auto;
}
.tte {
width: 20%;
height: 50%;
background-color: green;
}
.as {
width: 60%;
height: 50%;
background-color: blue;
}
.ground {
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.middle {
left: 20%;
}
</style>
</head>
<body>
<div class="tte ground left"></div>
<div class="tte ground right"></div>
<div class="as ground middle"></div>
</body>
</html>
我希望代碼創建兩個綠色塊元素，每個塊的寬度分別為20％和高度50％，分別在左上角和右上角對齊，一個藍色塊元素在中間以寬度60％和右對齊。相同的高度。 但是，藍色元素的末尾與最后一個（右側）綠色元素的開始之間存在明顯的空白。 為什么？
- 在Mavericks上使用Safari 7.0.1
1 個解決方案
解決方案1
1 已采納 2014-01-08 20:25:58
編輯：您是否嘗試過使用display：table-cell？ 像這樣？ http://jsfiddle.net/RGZZL/1/
.wrapper {
display:table;
height:300px;
width:100%;
}
.left, .right {
display:table-cell;
width:20%;
background:green;
}
.middle {
display:table-cell;
width:60%;
background:blue;
}
-
我沒有看到您正在談論的問題，請嘗試一下。 在div周圍放一個包裝紙，然后在該div上將font-size和line-height設置為零。 然后，重新設置內部三個div的字體大小和行高。 我發現有時代碼中的空格會使瀏覽器認為您的空格字符會增加空格。
空白屬性會破壞元素的寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.