css中改变边距会影响原大小,CSS：更改父容器中子项的边距会改变子项的宽度吗？...

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

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

正向边距 - 左边20px会将我的div推向左边的类"row" 20px .

20px左边的负边距会将我的div推向右边的类"row" 20px .

然而，这不是发生的事情 . 实际上会发生以下情况：

正边距左边减小了div的宽度，类为"row"，左边为20px .

负边距左侧增加了我的div的宽度，类为"row"，左侧为20px .

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

谢谢！

.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%;

}

Margintest

ok

ok

ok

ok

ok

ok