Longer text in an inline-block shifts alignment

Question

Why does long text inside a inline-block shift alignment of the block before?

This is my code:

ul.card { display: block }
li.card { 
          display: inline-block; 
          width: calc(12em - 12px); 
          height: calc(12em - 12px); 
          margin: 0px;
          padding: 6px; 
          background-color: maroon; color: white 
}

<ul class="card">
   <li class="card test"><a href="#">Short text</a></li>
   <li class="card test">Longer text shifts alignment</li>
</ul>

And this is the way it shows up:

which becomes ok with short text:

Codepen here

Why is that? how can I fix this?

score 1 · Accepted Answer · answered Mar 17 '22 at 07:01

display: inline-block is to make your element inline with others and respect height/width, margin, and padding, but the problem with your case is you set limited width and now the line-height of your content changed to align with your text

If you remove the height, you can observe it like this

For a quick fix, you can set vertical-align: middle;

li.card {
  vertical-align: middle;
  display: inline-block;
  width: calc(12em - 12px);
  height: calc(12em - 12px);
  margin: 0px;
  padding: 6px;
  background-color: maroon;
  color: white
}

a {
  text-decoration: none;
  color: white;
  font-family: sans
}

<ul class="card">
  <li class="card test"><a href="#">Short text</a></li>
  <li class="card test"><a href="#">Short text ok da  da das dasdas das </a></li>
</ul>

score 0 · Answer 2 · edited Mar 20 '22 at 23:03

0

ul.card {
  display: flex;
  gap: 10px;
}

edited Mar 20 '22 at 23:03

the Tin Man

158,662
42
215
303

answered Mar 17 '22 at 06:57

Nikhil

60
8

Please read "[answer]" and "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – the Tin Man Mar 20 '22 at 23:03

score 0 · Answer 3 · answered Mar 17 '22 at 06:59

It's a vertical aligning issue, caused by the default value. You would need vertical-align: middle; on li.card, like this:

ul.card {
  display: block;
}
li.card {
  vertical-align: middle;
  display: inline-block;
  width: calc(12em - 12px);
  height: calc(12em - 12px);
  margin: 0px;
  padding: 6px;
  background-color: maroon;
  color: white;
}

<ul class="card">
  <li class="card test"><a href="#">Short text</a></li>
  <li class="card test">Longer text shifts alignment</li>
</ul>

score 0 · Answer 4 · answered Mar 17 '22 at 07:17

Try below code:

ul.card { display: flex }
li.card { 
          display: inline-block; 
          width: calc(12em - 12px); 
          height: calc(12em - 12px); 
          margin: 0px;
          padding: 6px; 
          background-color: maroon; color: white 
}
li.card:not(:last-child){
  margin-right:5px;
}

<ul class="card">
   <li class="card test"><a href="#">Short text</a></li>
   <li class="card test">Longer text shifts alignment</li>
</ul>

Longer text in an inline-block shifts alignment

4 Answers4