Inline-block element drops upon completion

The problem occurs because the browser is aligning the DIV 's inline-block with the baseline of the text contained in them.

There are two solutions I can think of right now:

• add vertical-align: bottom; in class blocoexp

  This causes the browser to align the DIVs vertically using the bottom of the element ( bottom ) and not the baseline of the text.

  .blocoexp {
    display: inline-block;
    width: 100px;
    height: 300px;
    border: 1px solid black;
    vertical-align: bottom;
  }
  .blocoexp figure {
    width: 30%;
    height: 80px;
    border: 1px solid black;
  }
  .blocoexp p {
    width: 30%;
    height: 80px;
    border: 1px solid black;
    word-break: break-all;
  }

  <div id="blocoexpai">
    <div class="blocoexp">
      <figure></figure>
      <p>asdasdasd</p>
    </div>
    <div class="blocoexp">
      <figure></figure>
      <p>asdasdasd</p>
    </div>
    <div class="blocoexp">
    </div>
  </div>

• add overflow: hidden; in class blocoexp

  This causes the browser to see the element as a window, in which the sub-elements are on the other side of the window ... cutting off the elements that go beyond the parent element, and also creating a kind of isolation between what's outside and inside the element.

  .blocoexp {
    display: inline-block;
    width: 100px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
  }
  .blocoexp figure {
    width: 30%;
    height: 80px;
    border: 1px solid black;
  }
  .blocoexp p {
    width: 30%;
    height: 80px;
    border: 1px solid black;
    word-break: break-all;
  }

  <div id="blocoexpai">
    <div class="blocoexp">
      <figure></figure>
      <p>asdasdasd</p>
    </div>
    <div class="blocoexp">
      <figure></figure>
      <p>asdasdasd</p>
    </div>
    <div class="blocoexp">
    </div>
  </div>

Explanation of vertical-align

Imagine the FATHER and SON elements. For each element, the browser has several lines to do vertical alignment:

• baseline and top of text
• lower, middle, and top lines of the element
• subscript and superscript text lines

When you indicate a vertical-align in SON, the browser will align one of the lines of the SON with one of the lines of the PAI, following a rule for each value of vertical-align (CSS is thus, you have to decorate several rules ):

• baseline = > aligns the child's baseline with that of the parent
• bottom = > aligns the bottom line of the child element with that of the parent
• middle = > aligns the middle line of the child element with that of the parent
• top = > aligns the top line of the child element with that of the parent
• sub = > aligns the child's baseline with the parent's subscript text line
• super = > aligns the child's baseline with the parent's superscript text line
• text-bottom = > aligns the bottom line of the child element with the bottom line of the parent's text (in my test, it's the subscript text line of the parent, but I think it actually equals the line that goes through the lower bound of letters like 'j', ' p ',' q 'and' g ')

• text-top = > aligns the top line of the child element with the top line of the parent's text

  • NOTE: In Chrome, I noticed that the baseline of an element without text is equal to the bottom line of the element, which affects the baseline , sub , and super .

Display rules applied side by side

.filho {
  display: inline-block;
  min-width: 10px;
  height: 100px;
  border: 1px solid black;
  font-size: 12px;
  margin: 0;
}
#pai {
  font-size: 48px;
  white-space: nowrap;
}

<div id="pai">
  I
  <div class="filho" style="vertical-align: bottom;">
    bottom
  </div>
  <div class="filho" style="vertical-align: bottom;"></div>
  I
  <div class="filho" style="vertical-align: middle;">
    middle
  </div>
  <div class="filho" style="vertical-align: middle;"></div>
  I
  <div class="filho" style="vertical-align: top;">
    top
  </div>
  <div class="filho" style="vertical-align: top;"></div>
  I
  <div class="filho" style="vertical-align: baseline;">
    baseline
  </div>
  <div class="filho" style="vertical-align: baseline;"></div>
  I
  <div class="filho" style="vertical-align: text-bottom;">
    text-bottom
  </div>
  <div class="filho" style="vertical-align: text-bottom;"></div>
  I
  <div class="filho" style="vertical-align: text-top;">
    text-top
  </div>
  <div class="filho" style="vertical-align: text-top;"></div>
  I
  <div class="filho" style="vertical-align: sub;">
    sub
  </div>
  <div class="filho" style="vertical-align: sub;"></div>
  I
  <div class="filho" style="vertical-align: super;">
    super
  </div>
  <div class="filho" style="vertical-align: super;"></div>
  I
</div>