css - 关于内部 div 间距的边距或填充？

Question

关于标题，这是我现在的想法:

Margins are supposed to be used only to space things on the Y axis (bottom/top) and paddings for the X axis (right/left).

但是检查一下:

.container {
  display: flex;
  flex-direction: column;
  width: 240px;
}

.item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0 0 0;
}

.item:first-of-type {
  margin: 0;
}

.item {
  padding: 16px;
  border: 1px solid gray;
      background-image:
      linear-gradient(to bottom,
        white 0%,
        white 100%),
      linear-gradient(to bottom,
        #ccfff5 0%,
        #ccfff5 100%);
    background-clip: content-box, padding-box;
}

h3 {
  margin: 0;
  line-height: initial;
}

.buttons {
  display: flex;
  flex-direction: row;
  margin: 12px 0 0 0;
}

.first-button {
  margin-right: 12px;
}

<div class="container">
  <div class="item" id="one">
    <h3>This is some title!</h3>
    <div class="buttons">
      <button class="first-button">Click</button>
      <button class="second-button">Click</button>
    </div>
  </div>
  <div class="item" id="one">
    <h3>This is some title!</h3>
    <div class="buttons">
      <button class="first-button">Click</button>
      <button class="second-button">Click</button>
    </div>
  </div>
</div>

为了让我将这些按钮隔开并且不更改我的标记以使每个按钮都有一个容器，我必须使用边距。现在的问题是，假设我们的工作规模更大……如果大容器变小怎么办？

边距，当处理诸如 12px 的绝对值时，不要考虑容器在任何轴上的大小，如果它变小，那么事情开始看起来很乱，因为你有溢出到处都是利润。

我应该做什么用？

Answer 1

我不太确定你从哪里得到的那个片段是从 Y 轴的边距和 X 轴的填充，因为在很多情况下你会想要沿着两个轴改变这两个。

简单的答案是边距是边界外的内容，而填充是边界内但内容外的内容。

盒子模型是一个很好的引用。

https://www.w3schools.com/Css/css_boxmodel.asp

(编辑:因为我想我不够明确而被否决后)

如果您想要调整元素边框之间的距离，您应该使用边距，而当您想要减少或增加内容和边框之间的空间时，您应该使用边距。因此，如果您希望为您的内容留出最大空间，我会将内边距保留在接近 0 像素的位置，并使用边距来调整对象之间的距离。