DIV边界没有对齐[重复]

Question

我正在尝试使用弹性框创建一个包含 3 个 div 的表格，但是当我为 div 添加边框时，边框并没有在下一个 div 的顶部对齐。任何有鹰眼斑点的人我都想念什么？ 谢谢！

.content div {
  width: 350px;
  border: solid;
  padding: 6px;
}

p {
  font-size: medium;
  font-weight: 700;
  color: #000;
  margin-left: 10px;
}

.content {
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.red {
  display: flex;
  align-items: center;
  justify-content: center;
}

.green {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="content">
  <div class="red"><img src="https://i.ibb.co/7YJB7QC/flag.png" alt="flag" border="0" width="40" height="40">
    <p>100% Made in the USA</p>
  </div>
  <div class="green"><img src="https://i.ibb.co/dmDyGKH/100.png" alt="100" border="0" width="40" height="40">
    <p>100% Happiness Guaranteed</p>
  </div>
  <div class="blue"><img src="https://i.ibb.co/zmK0Jk0/check.png" alt="check" border="0" width="40" height="40">
    <p>100% Secure Checkout</p>
  </div>
  <table>
  </table>
</div>

Answer 1

如果你指的是因为盒子模型的粗边框，每个元素的边框都在彼此的正下方，看起来边框是 2px。一个很好的技巧是在每个元素上都没有顶部或底部边框，然后调整第一个或最后一个。

这是我的解决方案，我对所有项目应用了无边框底部，并将边框添加回最后一个元素的底部。

.content div {
  width: 350px;
  border: solid;
  padding: 6px;
  border-bottom: none;
}

.content div:last-child {
  border-bottom: solid;
}

.content div {
  width: 350px;
  border: solid;
  padding: 6px;
  border-bottom: none;
}

.content div:last-child {
  border-bottom: solid;
}

p {
  font-size: medium;
  font-weight: 700;
  color: #000;
  margin-left: 10px;
}

.content {
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.red {
  display: flex;
  align-items: center;
  justify-content: center;
}

.green {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="content">
  <div class="red"><img src="https://i.ibb.co/7YJB7QC/flag.png" alt="flag" border="0" width="40" height="40">
    <p>100% Made in the USA</p>
  </div>
  <div class="green"><img src="https://i.ibb.co/dmDyGKH/100.png" alt="100" border="0" width="40" height="40">
    <p>100% Happiness Guaranteed</p>
  </div>
  <div class="blue"><img src="https://i.ibb.co/zmK0Jk0/check.png" alt="check" border="0" width="40" height="40">
    <p>100% Secure Checkout</p>
  </div>
</div>

Answer 2

Flexbox 项目不会折叠边框。

如果您希望边框像表格边框一样操作，display 它们就像 table、table-row 和 table-cell：

div.content {
  width: 350px;
  display: table;
  text-align: center;
  border-spacing: 0;
  border-collapse: collapse;
}

div.content div.row {
  border: solid 2px black;
  display: table-row;
}

div.row p {
  display: table-cell;
}

div.content div.row img {
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}

<div class="content">
  <div class="red row">
    <p>
        <img src="https://i.ibb.co/7YJB7QC/flag.png" alt="flag"></img>

      100% Made in the USA
    </p>
  </div>
  <div class="green row">

    <p>
        <img src="https://i.ibb.co/dmDyGKH/100.png" alt="100"></img>
      100% Happiness Guaranteed
    </p>
  </div>
  <div class="blue row">
    <p>
    <img src="https://i.ibb.co/zmK0Jk0/check.png" alt="check"></img>

      100% Secure Checkout
    </p>
   </div>
  </div>

Answer 3

尝试设置边框的粗细，例如1px：

.content div {
  width: 350px;
  border: 1px solid;
  padding: 6px;
}