Inline-block element drops when filled

Asked

Viewed 685 times

1

I have 3 elements inline-block. Are 3 squares aligned, summarizing.

So when I put one div "daughter" in one of them, he falls and the other empties stay in position. It happens the same with all.

But if I put one div daughter in(fill) ALL, they keep in the correct position. Otherwise, they fall.

View with the 3 Divs containing <figure> and <p>, everything aligns.

.blocoexp{
		display:inline-block;
		width:100px;
		height:300px;
		border:1px solid black;
	}
	
	.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 class="blocoexp">
        	<figure></figure>
            <p>asdasdasd</p>
        </div>
        <div class="blocoexp">
            <figure></figure>
            <p>asdasdasd</p>
        </div>
        <div class="blocoexp">
        	<figure></figure>
            <p>asdasdasd</p>
        </div>

Now see if I can get the contents out of one of the Ivs.

    .blocoexp{
    		display:inline-block;
    		width:100px;
    		height:300px;
    		border:1px solid black;
    	}
    	
    	.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>

Bye! It’s just empty, the others fall.

css positioning alignment

1 answer

4


The problem is because the browser is aligning the DIV's inline-block the baseline of the text contained therein.

There are two solutions I can think of now:

  • add vertical-align: bottom; in class blocoexp

    This causes the browser to align 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 it... cutting the elements that go beyond the parent element, and also creating a kind of isolation between what is 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 elements FATHER and SON. For each element, the browser has several lines to do vertical alignment:

  • text baselines and top lines
  • bottom, middle and top rows of the element
  • lines of subscribed text and superscript

When you indicate a vertical-align in the CHILD, the browser will align one of the CHILD lines with one of the PARENT lines, following a rule for each value of vertical-align (CSS is like this, you have to memorize various rules):

  • baseline => aligns the child’s baseline with that of the father
  • bottom => aligns the bottom line of the child element with the parent
  • middle => aligns the midline of the child element with that of the parent
  • top => aligns the top line of the child element with the parent
  • sub => aligns the child’s baseline with the parent’s subscribed 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 text (in my test, it’s the parent’s subscript line, but I think it actually equates to the line that goes through the lower limit 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 text

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

View of the rules applied side by side

Guias de alinhamento

.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>

  • Although your answer has solved my problem, I did not understand the logic of the thing actually. Browser reading at the base of the text?

  • I put an improved explanation about the vertical-align. Tell me your opinion... if it’s easy to understand now, or if it can still be improved.

  • I’m reading your answer in pieces and I can understand it. What it seems to me so far is that this property is the most complicated of all CSS.

  • Why is the empty inline-block also not lined up in baseline? By the way, I think it lined up right? But it says that it contained text respected from the text. But why not from the inline-block already q it is proved as text?

  • I still have a lot of trouble bro. It’s like you accept me in the face?

  • The baseline of inline-block emptiness becomes equal to bottom element, since it has no content.

  • I just can’t understand the behavior of an inline-block with text. I don’t understand if it’s because the line respects the text contained in the inline-block and not it itself or if it’s something else.

  • That’s exactly what you said. You got it. How much text is inside the inline-block a baseline is the basis of the text contained in this (and no longer the element as a whole). Just reinforcing what you said.

  • I’m still waiting for your reply.

  • Po had not even seen it. I mainly use the Sopt to clarify doubts, the face is not good for it... incidentally I rarely use it.

Show 5 more comments

Browser other questions tagged css positioning alignment

You are not signed in. Login or sign up in order to post.