Question

我正在尝试理解CSS中的填充，边距和负边距，我创建了以下代码以增加我的理解。

我尝试在我的“行”类中添加一个边距，根据我对CSS中边距的基本了解，我预计会发生以下情况：

20px左边的正边距将推动我的div与左侧的“行”20px类。
20px左边的负边距将推动我的div与右边的“row”20px类。

但是，这不是发生的事情。实际上会发生以下情况：

正边距 - 左边减少我的div的宽度，类“row”，左边是20px。
负边距 - 左边增加了我的div的宽度，类为“row”，左边为20px。

现在我有一种感觉这是因为我的div与类“row”是div的一个孩子，类为“容器”。但是，我不明白为什么会出现这种情况。我希望有人能提供帮助！

谢谢！

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.container {
    width: 200px;
    height: 200px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: red;
}

.row {
    margin-left: 20px;
    background-color: yellow;
}

.row::after {
    content: "";
    display: block;
    clear: both; 
}

.col { 
    background-color: blue;
    float: left; 
    width: 20%;
}

</style>
    <title>Margintest</title>
</head>
<body>
<div class = "container">
    <div class = "row">  
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>
        <div class = "col"> ok </div>

    </div>
</div>

</body>
</html>

Answer 1

这不是因为div是另一个div的孩子，而是因为你没有为row div设置特定的宽度。如果没有指定宽度，则宽度为auto，这意味着：使用父级的宽度，减去边距，填充等的宽度。

这样清楚了吗？

Answer 2

边距是元素周围的空间。所以

margin-left: 20px;

表示“我想在元素的左侧放置20px的空间”。因此，元素向右移动。边距通常不会减小元素的宽度。

在你的情况下确实如此。但只是因为您的容器设置为200px的固定宽度。 row元素尝试填充此空间。因此，没有余量，它也将是200px宽。如果行和容器之间有空格（大小不变），则行的宽度会减小。

Answer 3

简答：

（抱歉我画的不好）

答案很长：

看来你对保证金有一些误解。边距赋予元素边界外的透明空间/区域。

在您的示例中，row的左边框显示为蓝线（好吧，不是一直向下）。并且row的边距向右移动20px。

您可以在此处了解有关保证金和填充的更多信息：

CSS：更改父容器中子项的边距会改变子项的宽度吗？

3 个答案: