qslcna qslcna - 4 days ago 5
CSS Question

How to compute div height

I'm new to css. When I learning I found something make me confused.
I know if not set the height of div it will decide by what it contain.
Like



div {
border: solid red;
}
div.a {
border: solid green;
height: 10px;
}

<div>
<div class="a">
123<br/>
123<br/>
123<br/>
</div>
</div>





Outermost div'height up to div.a's height is 10px.

But When set
div.a
display: inline-block
;



div {
border: solid red;
}
div.a {
border: solid green;
height: 10px;
display: inline-block
}

<div>
<div class="a">
123<br/>
123<br/>
123<br/>
</div>
</div>





The height changed. It is up to div.a's content event it is overflow.

What's the
display: inline-block
effect.

Answer

I think your issue here is the combination of giving it a specific height and the overflowing content.

I have done some examples here that might help.

DEMO https://jsfiddle.net/r6n12325/:

HTML:

<div class="box1">
  <div class="box2">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

<hr>

<div class="box3">
  <div class="box4">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

<hr>

<div class="box5">
  <div class="box6">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

CSS:

.box1 {
  border:1px solid #333;
}
.box2 {
  border:1px solid red;
}

.box3 {
  border:1px solid #333;
}
.box4 {
  height: 10px;
  display:inline-block;
  border:1px solid red;
}

.box5 {
  border:1px solid #333;
}
.box6 {
  height: 10px;
  display:inline-block;
  border:1px solid red;
  overflow:auto; /* could also use hidden */
}
Comments