个人中心
gpt4 book ai didi

html - 元素之间不需要的空白

转载 作者：行者123 更新时间：2023-11-28 17:58:05 25 4
gpt4 key购买 nike

为什么以下 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>

我希望代码创建两个绿色 block 元素，每个宽度为 20%，高度为 50%，分别在左上角和右上角对齐，一个蓝色 block 元素在中间对齐，宽度为 60 % 和相同的高度。但是蓝色元素的末尾和最后一个(右侧)绿色元素的开头之间有明显的空白。为什么？

  • 在 Mavericks 上使用 Safari 7.0.1

最佳答案

编辑:您尝试过使用 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。我发现有时您的代码中的空格会让浏览器认为您在其中添加了空格字符。

关于html - 元素之间不需要的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21004515/

25 4 0
文章推荐： python - 每日编码问题 : f parameter/function
文章推荐： ios - 按升序对 NSArray 的数字进行排序，但在末尾发送零
文章推荐： javascript - 克隆一个下拉选项并在将其存储在同一下拉列表中后以不同的方式命名
文章推荐： 管理生成器的 Pythonic 方式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com