元素之间的空间

2018-07-02 00:51:37

为什么下面的CSS代码在蓝色（中间）元素的末尾和最后一个（右侧）元素之间创建了空白区域？

    <!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％，相同的高度。但是在蓝色元素的末端和最后一个（右侧）绿色元素的开始之间有明显的空白。为什么？

在小牛队使用Safari 7.0.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;
}

我没有看到你正在谈论的问题，但试试这个。在div上放一个包装，并将字体大小和行高设置为零。然后重置三个div的字体大小和行高。我发现有时代码中的一个空格可以让浏览器认为你有一个空格字符，它增加了空格。

链接地址: http://www.djcxy.com/p/89307.html

上一篇: space between elements

下一篇: Unwanted space between img and figcaption inside figure