0

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>
Agus Achille
  • 48
  • 4
  • The empty div has difficulty determining the position of its baseline. Solution: align them to one another by setting the vertical-align property. – Mr Lister Sep 13 '16 at 19:36

2 Answers2

2

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>
vsync
  • 118,978
  • 58
  • 307
  • 400
1

Change the style

    div { 
width: 100px; 
height: 100px; 
background-color: red; 
border: 2px solid #000; 
float:left; 
margin:0 2px;
 }

https://jsfiddle.net/anwnacc2/

please check th jsfiddle

Aswin KV
  • 1,710
  • 2
  • 12
  • 23
  • div { width: 100px; height: 100px; background-color: red; border: 2px solid #000; float:left; margin:0 2px; } use this style it will make the divs side by side – Aswin KV Sep 13 '16 at 19:39