元素之间的缩进（边距，填充）（css）答案

【问题标题】：Indent (margin, padding) between elements (css)元素之间的缩进（边距，填充）（css）
【发布时间】：2018-10-19 23:12:09
【问题描述】：

我遇到了一个问题：有一个具有样式的 flex 包装器

justify-content: space-between

和

flex-wrap: wrap

我希望左键、右键和文本块在换行之前有一些空间。并且在下一行右键转换后，“边框”侧不会有任何缩进。希望你能理解。

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid;
}
button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}

<div class="long-line">
  <div class="left-item"><button>Big left button</button></div>
  <div class="center-item">more and more text</div>
  <div class="right-item"><button>right button</button></div>
</div>

https://i.stack.imgur.com/ykxcI.png
https://i.stack.imgur.com/FtyXj.png
https://i.stack.imgur.com/80JbP.png

【问题讨论】：

试试justify-content: space-evenly;
@ShivKumarBaghel 它看起来仍然和第二张截图一样。在下一行转换后，我不需要元素的边距。请看截图
你的代码看起来很好，就像图片一样
@TemaniAfif 我知道。我的代码有不同窗口大小的屏幕截图。我需要通过在元素之间留出一些空间来防止这种粘在一起

标签： html css margin padding indentation

【解决方案1】：

您可以为中心文本 div 设置边距，使其不会粘在边框上。还有按钮的上边距，以防它们卡在某些视点上。

【讨论】：

但是当“父级”变小时，它将越过下一行，并且与按钮相比，左边框的空间更大。抱歉之前没有提到。

【解决方案2】：

我找到了一种可能的解决方案：
1) 从“长线”中删除填充；
2) 在 div 中包装按钮；
3) 为“long-line”的孩子添加填充。

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}

.long-line > div {
    padding: 10px;
}

button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}

<div class="long-line">
    <div class="left-item"><button>Big left button</button></div>
    <div class="center-item">more and more text</div>
    <div class="right-item"><button>right button</button></div>
</div>

【讨论】：