元素之间不需要的空白
[英]Unwanted white-space between elements
问题描述
Why does the following CSS code create white-space between the end of the blue (middle) element and the last (right) element? 
为什么以下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>
I expect the code to create two green block elements, each with width 20% and height 50%, aligned in the left top corner and the right top corner respectively, and a blue block element aligned right in the middle with width 60% and the same height. 我希望代码创建两个绿色块元素，每个块的宽度分别为20％和高度50％，分别在左上角和右上角对齐，一个蓝色块元素在中间以宽度60％和右对齐。相同的高度。 But there is noticeable white-space between the end of the blue element and the beginning of the last (right) green element. 但是，蓝色元素的末尾与最后一个（右侧）绿色元素的开始之间存在明显的空白。 Why? 为什么？
- Using Safari 7.0.1 on Mavericks 在Mavericks上使用Safari 7.0.1
1 个解决方案
解决方案1
1 已采纳 2014-01-08 20:25:58
EDIT: Have you tried using display:table-cell? 编辑：您是否尝试过使用display：table-cell？ Like this? 像这样？ http://jsfiddle.net/RGZZL/1/ 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;
}
-- -
I don't see the issue you're talking about, but try this. 我没有看到您正在谈论的问题，请尝试一下。 Put a wrapper around the divs, and set the font-size and line-height to zero on that one. 在div周围放一个包装纸，然后在该div上将font-size和line-height设置为零。 Then reset the font-size and line-height for the three divs inside. 然后，重新设置内部三个div的字体大小和行高。 I've found that sometimes a space in your code can make the browser think you have a space character in there which adds whitespace. 我发现有时代码中的空格会使浏览器认为您的空格字符会增加空格。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.