Alignment Issue :- Second Post is not aligned properly

Question

i am facing an alignment issue for which i have a solution. But i wanted to know the reason behind this. If u run the html markup which i have provided you can see that the second post is not inline with the first post.

I wanted second post to align with first post. I have the solution by using flex.But i need reason and not the solution

HTML :-

<div class="_3yTtBPc-LMIvY20o00OVsF">
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO" style="">sunt aut facere repellat provident occaecati excepturi optio reprehenderit</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO" style="
    /* min-height: 90px; */
">qui est esse</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO">ea molestias quasi exercitationem repellat qui ipsa sit aut</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO">eum et est occaecati</div>
    <div>Nik</div>
  </div>
</div>

CSS :-

._3yTtBPc-LMIvY20o00OVsF {
  margin: auto;
  height: 200px;
  text-align: center;
}

._2wIS4xHyz03D-DXLdHPFxP {
  width: 90px;
  height: 130px;
  display: inline-block;
  padding: 20px 30px;
  margin: 10px 30px;
  border: 2px solid grey;
  box-shadow: 2px 5px 0 lightgrey;
}

._2NwLO4_WeKC2-xigIODSyO {
  max-height: 90px;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

expected :- second post should be in line with first post actual :- second post is bit down that first post.

Possible duplicate for: https://stackoverflow.com/questions/13548168/why-my-inline-block-divs-are-not-aligned-when-only-one-of-them-has-text — Hunor, Jun 01 '19 at 12:29
Possible duplicate for: https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward — Hunor, Jun 01 '19 at 13:56

score 2 · Answer 1 · answered Jun 01 '19 at 12:39

2

By default when you use the display:inline-block; you are using a vertical-align: baseline; You can see a similar problem at this url:

Why my inline-block divs are not aligned when only one of them has text?

You need to add explicitly vertical-align: top, in order to align the blocks relative to their tops, otherwise the alignment will be done based on the baselines of the internal divs, as you see on the image.

answered Jun 01 '19 at 12:39

Hunor

449
1
5
19

i had one question though, vertical-align:baseline uses parent baseline how come it is taking child divs baseline. – Vishal Patil Jun 01 '19 at 13:46
I am still thinking about it too. An other very similar problem answered here: https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – Hunor Jun 01 '19 at 13:53

score 0 · Answer 2 · answered Jun 01 '19 at 12:29

You need to add vertical-align: top;

._2wIS4xHyz03D-DXLdHPFxP {
  width: 90px;
  height: 130px;
  display: inline-block;
  padding: 20px 30px;
  margin: 10px 30px;
  border: 2px solid grey;
  box-shadow: 2px 5px 0 lightgrey;
  vertical-align: top;
}

Alignment Issue :- Second Post is not aligned properly

2 Answers2