CSS 中的边框与填充

Question

我试图了解 CSS 中填充和边框之间的确切关系。

如果说透明颜色的实心边框与相同数量的填充在本质上是相同的东西是否准确，并且可以预期它们的行为相似 - 除了它们将共存于同一元素上而不是互相覆盖？

换句话说，是否存在以下情况：

#Square1{
    padding: 50px;
}

，如果替换为：

#Square1{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

应该以任何有意义的方式显示不同的行为，除了如果在同一个 CSS 文件中有类似的东西：

.ClassThatSquare1HappensToHave{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

，在这种情况下，您实际上会得到两倍的数量 border/padding/element-expanding space?

Answer 1

它们都属于 CSS 盒子模型，但用途不同。

在box model中：

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height. (...)

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height(...)

If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

话虽如此，只要您想给出内部 space，就应该使用 padding，并使用 border 准确给出它的内容 - 边框 - 一条线，如果有padding 会显示在 padding 区域之后。

Answer 2

也许这就是您要找的。请注意溢出在左侧显示的内容（被剪裁到填充边缘）和滚动条的位置（位于填充外但在边框内）中的行为有何不同。

#Square1{
    padding: 50px;
}

#Square2{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

body {
  width:400px;
}

div {
  background-color:lightblue;
  height:100px;
  overflow:auto;
}

<div id="Square1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <hr>
  <div id="Square2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

CSS 中的边框与填充

Border vs. padding in CSS

css

border

padding