Question

关于标题，我现在正在想的是

边距仅用于在Y轴（底部/顶部）和X轴的填充物（右/左）之间隔开空间。

但是请检查一下：

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

为了让我将这些按钮隔开，并且不更改标记以为每个按钮都具有容器，我必须使用margin。现在，假设我们要进行更大规模的工作，问题就变成了……如果大容器变小会怎样？

边距在处理诸如12px之类的绝对值时，不尊重容器在任何轴上的大小，如果它变得更小，则由于看起来到处都有边距溢出，因此情况看起来会很混乱。

我该怎么办？

Answer 1

我不确定从空白处获得的代码片段是在Y轴上还是填充在X轴上，因为在很多情况下，您都希望沿两个轴都进行更改。

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

盒子模型是一个很好的参考。

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

（编辑：由于我想我不够明确而被否决）

如果要减少或增加内容和边框之间的间距，如果要调整元素边框和填充之间的距离，则应使用margin。因此，如果您希望为内容提供最大的空间，我将在0px附近保留填充，并使用边距来调整对象之间的距离。

关于内部div间距的边距还是填充？

1 个答案: