CSS: Aligning divs 2 on a line without using float [duplicate] - css

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I am trying to avoid using float. When I lower the width to 49%, they sit side by side but unevenly. When I raise the width to 50%, each div sits on it's own line so I'm not sure why.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>

Answer 1

Because inline-block respect space character, in this case, each element puts a "character" space between the divs. Do avoid this there are some tricks but I suggest you to use css grid:
body {
display: grid;
grid-template-columns: 1fr 1fr;
}

Answer 2

display: inline; and display: inline-block uses text spacing as opposed to display: block which will position items more precisely.
By moving the divs to a single line, this forces the divs to have zero space in between them.
See this article for more information.
body {
margin: 0px;
padding: 0px;
}
div {
min-height: 50vh;
width: 50%;
display: inline-block;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: blue;
}
div:nth-child(4) {
background-color: yellow;
}
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>

Answer 3

You should use flexbox.
you would need to wrap your divs in another div width the class="container"
then you could do this
.container {
display: flex; /* display side by side */
align-items: center; /* align vertically */
}
.container > * {
flex: 1;
}

Answer 4

If you need to use inline-block make sure you write your html without any spaces.
this does not work:
<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>
this does work:
<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>