0

when i am adding some content inside DIV the display is different then i am adding nothing inside the DIV. why this weird behaviour is happening.

  1. with some inner content

https://i.stack.imgur.com/ORknc.png

  1. without any inner content

https://i.stack.imgur.com/Uf6hS.png

why this weird behaviour by display:inline-block??

Aadarsh Bishen
  • 69
  • 5

1 Answers1

2

The default vertical alignment of inline-blocks is baseline. If there is text content, this refers to the baseline of the last line of that text. If there is no text content, this refers to an imaginary baseline at the bottom of the inline-block, hence the alignment you illustrated with your images. See also the following example:

.x {
  display: inline-block;
  width: 80px;
  height: 120px;
  border: 1px solid red;
}
<div class="x"></div>
<div class="x"></div>
<div class="x">aasd asd asd asd asd asd asd asd asd asd </div>
<div class="x">b</div>
<div class="x"></div>

If you want to avoid this, you can add vertical-align: top;;

.x {
  display: inline-block;
  width: 80px;
  height: 120px;
  border: 1px solid red;
  vertical-align: top;
}
<div class="x"></div>
<div class="x"></div>
<div class="x">aasd asd asd asd asd asd asd asd asd asd </div>
<div class="x">b</div>
<div class="x"></div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • if i use different div with different height, and vertical-align: bottom; so the baseline is decided on the basis of longest height. my question is how can i dynamically change the base line or set my own baseline?? – Aadarsh Bishen Jun 27 '22 at 06:04
  • you can't set your own baseline, you can only change the `vertical-align` setting (top/bottom, baseline etc., see also https://developer.mozilla.org/de/docs/Web/CSS/vertical-align) – Johannes Jun 27 '22 at 08:34