Agus Achille Agus Achille - 2 months ago 9
CSS Question

Why is the empty div moving the div with content?

I dont understand why is the empty div moving the div with the content.



div {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
display: inline-block;
}

<div>a</div>
<div></div>




Answer

You need to add vertical-align to them:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 2px solid #000;
  display: inline-block;
  vertical-align:top; /* <-- SEE THIS? */
}
<div>a</div>
<div></div>