Why Does inline block element of same height & width do not align vertically itself

Question

Why do inline-block elements not align on vertical top itself? If I have same content in all the blocks it is good, but Ii reduce content in one, it loses it alignment. In the code - there are four divs with class para1 & css defined. 2nd, 3rd & 4th div are ok, but 1st is moved below, as content is less in it. I can get it ok with position or using float but need to understand why it is like this?

 .para1 { width: 24%; height: 200px; border: 2px solid red; display: inline-block; } 

 <div> <div class="para1"> <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> </div> 

Answer 1

Because the default vertical alignment of inline elements is baseline . Change it to something like middle or top and they align as I think you'd want them to.

 .para1 { width: 24%; height: 200px; border: 2px solid red; display: inline-block; vertical-align: top; } 

 <div> <div class="para1"> <p>Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. </p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus. Cras fringilla malesuada sem, et aliquam ligula tincidunt a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, est ut mattis blandit, magna leo iaculis lacus, vel volutpat eros sem at velit. Curabitur sit amet massa et sapien porttitor luctus.</p> </div> </div>