DIV borders not lining up [duplicate] - html

Question

This question already has answers here:
How to make borders collapse (on a div)?
(8 answers)
Closed 2 years ago.
I am trying to create a table with 3 divs using flex box, but when I add a border to the div's the border isn't lining up on top of the next div. Anyone with an eagle eye spot what I'm missing?
Thanks!
.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

If you are referring to the thick borders its because of the box-model, the borders from each element are right underneath each other making it look like the border is 2px. A good trick is to have no top or bottom borders on each element and then adjust either the first or last one.
This was my solution, I applied a border-bottom of none to all the items and the added the border back to the bottom of the last element.
.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 items don't collapse borders.
If you want the borders to operate like table borders, display them like table, table-row, and 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

Try setting a thickness for the border, such as 1px:
.content div {
width: 350px;
border: 1px solid;
padding: 6px;
}