个人中心
gpt4 book ai didi

html - 为什么我的边距会崩溃，即使我对所有内容都有边框？

转载 作者：太空宇宙 更新时间：2023-11-03 22:06:49 27 4
gpt4 key购买 nike

代码如下:

<html>

    <head>
        <title></title>

        <style type="text/css">

        * {border: 0px; padding: 0px;}

        #greenbox
        {
            margin: 20px;
            border: 5px solid green;

        }   

        #redbox
        {
            margin: 20px;
            border: 5px solid red;
        }

        #bluebox
        {
            border: 5px solid blue; 
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
                        margin-top: 20px; /*COLLAPSES - why??*/
        }

        </style>
    </head>
    <body>

        <div id="greenbox">

            <div id="redbox">

                red box
            </div>

            <div id="bluebox">

                    bluebox

            </div>

        </div>



    </body>
</html>

基本上，它是一个绿色盒子，里面包含一个红色盒子和一个蓝色盒子。

为什么红框和蓝框之间的垂直间距不是40px？

我知道红色框的底部边距和蓝色框的顶部边距已经“塌陷”，但据我了解，如果您有边框或填充，则边距不会塌陷(我试过两者 - 仍然是相同的结果。

最佳答案

边距不会通过边界折叠。它们确实会相互坍塌。

看这个例子:

<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>


<div class="red">
    <div class="blue">
    </div>
</div>

<div class="red border">
    <div class="blue border">
    </div>
</div>

当边框存在时，蓝色 div 顶部的边距会将蓝色 div 的顶部推离它所在的红色 div 的顶部。当边框不存在时，边距会穿过边缘并折叠到红色 div 周围的边距中。

您的两个页边距彼此接触，之间它们之间没有边框 — 因此它们会折叠。

关于html - 为什么我的边距会崩溃，即使我对所有内容都有边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5352592/

27 4 0
文章推荐： c# - 奇怪的值引用
文章推荐： css - UI设计——弹窗
文章推荐： node.js - 如何从磁力链接或 infohash 创建 torrent 文件
文章推荐： javascript - 简单的进度指示器，向用户显示他已访问网站的百分比
太空宇宙
个人简介

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

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