向 div 添加额外的填充导致其他 div 向下移动 - CSS？

Question

我创建了一个工作正常的 fiddle，但每当我尝试向 lef-col 添加额外的左填充时，其他两个 div 会向下移动。

我期望的是填充应用于 div 的内部内容和外部边界，但在这种情况下，它看起来像是添加到 div 计算中。让我知道我理解错误的通过。

PS - 我通过将 box-sizing: border-box 应用到 left-col 来修复。为此，我正在寻找 e.xplanation 而不是解决方案（尽管也欢迎其他解决方案！！）

代码-

HTML -

<div class="container">
        <div class="left-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
        <div class="mid-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
        <div class="right-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
    </div>

CSS -

*, html {
    margin: 0;
    padding: 0;
}

body {}

.container {
    padding: 20px;
    overflow: hidden;
}

.left-col, .mid-col, .right-col {
    width: 33.3%;
    float: left;
}

.left-col {
    background: lightpink;
}

.mid-col {
    background: lightgreen;
}

.right-col {
    background: lightblue;
}

Fiddle - https://jsfiddle.net/km2brd8m/

Answer 1

如果将 box-sizing: border-box 添加到 left-col 它将起作用，原因是当使用 box-sizing: border-box 时，填充包含在设置的宽度中。

Updated fiddle

您还可以使用 CSS Calc

从宽度中减去填充

.left-col {
    width: calc(33.3% - 20px);
    background: lightpink;
    padding-left: 20px;
}

Updated fiddle

Answer 2

将box-sizing: border-box; 属性添加到三列中。这将包括填充它的整体尺寸，而不是像目前所做的那样在原始尺寸之外填充。

Answer 3

padding增加了元素使用的space，就像margin一样。 border-box 使其使用元素本身的 space，而不是增加其大小。

您可以阅读更多相关信息 here。

向 div 添加额外的填充导致其他 div 向下移动 - CSS？

Adding an extra padding to a div causing other divs to move down - CSS?

html

css

padding