时间戳

首页 > 解决方案 > 涉及内部 div 间距时的边距或填充？

css - 涉及内部 div 间距时的边距或填充？

问题描述

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

边距应该仅用于在 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，不要考虑容器在任何轴上的大小，如果它变小，那么事情就会开始变得非常混乱，因为到处都有溢出的边距。

我应该用来做什么？

标签： css

解决方案

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

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

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

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

（编辑：在被否决后，因为我想我不够明确）

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

推荐阅读