Question

我想我只是部分地得到了它，现在我还有另一个我不明白的问题。我有一个div = id =“signin”，在其他2个div中。这两个div没有任何填充或边框，当我将margin-top应用于id =“signin”的div时，它现在不会在上面创建任何空格。为什么？ id =“signin”的div旁边的div能否以任何方式影响它？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body {margin: 0px;}

        #top-bar {
            background-color: #690203;
            height: 40px;

        }

        .fixed-width {
            width: 950px;
            margin: auto;
        }

        #logo {
            float: left;
        }

        #logo img {
            border-right: 2px solid #752124;
            padding: 9px;
        }
        
        #signin {
            float: left;
            width: 200px;
            margin-left: 15px;
            margin-top: 10px;
            border: 1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div id="top-bar">
        <div class="fixed-width">
            <div id="logo">
                <img src="images/logo.png" width="20">
            </div>
            <div id="signin">
                <!--<img src="images/signin.png" width="13">-->
                <span>test test</span>
            </div>
        </div>
    </div>
</body>
</html>

我最近开始学习css并遇到了一个我无法理解的问题。我有一个div嵌套在另一个内部，当外部div有一个边框，然后使用内部div的边缘导致在外部div中移动内部div，这是我认为应该工作的方式。但是，当外部div没有任何边框时，使用内部div的边距会导致移动外部div，并在其上方创建一些空间。请看看，试着解释为什么会这样。谢谢。

带边框的#bigger

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #bigger {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            border: 1px dashed black; /* border I use or don't use with the outer div */
        }

        #smaller {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            background-color: deeppink;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div id="bigger">
        <div id="smaller"></div>
    </div>

</body>
</html>

在#bigger中没有边框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #bigger {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
        }

        #smaller {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            background-color: deeppink;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div id="bigger">
        <div id="smaller"></div>
    </div>

</body>
</html>

Answer 1

这是因为CSS使用collapsing margins。

这个链接会比我更好地解释它，所以我建议给它一个阅读，但是给你一个简短的总结：

CSS中的保证金旨在显示元素的外部。在处理其他元素中的元素时，这种行为有点模糊，因为在父母内部或父母之外的两种情况下，边距都可以被认为是儿童之外的。确定边缘总是寻求在所有父元素之外，除非父母有一种风格阻止这种逻辑是真的。例如，如果父项具有边框，则它现在具有上面的内容，将子项与外部世界分开，这意味着子项的边距必须属于父项内部。如果没有，就没有分离，所以孩子的边缘向外冒险。

如果您希望始终在父级内部设置边距，则更好的选择可能是将填充应用于父元素，而不是将边距应用于子元素。

外部元素的边界会影响内部元素的边缘显示，为什么？

1 个答案: