DIV边界未对齐

Question

我正试图使用flex box创建一个包含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;
}