0
243
ViewsWhy a div with a small height (4px) cannot fit an element？The child element is displayed outside
I checked that it wasn't the width, I set the child element to be 10% wide and only one element
.pct-bar {
height: 4px;
background-color: rgba(121, 121,121,.3);
.gogo {
display: inline-block;
// float: left; // If I set float, this problem will not occur
width: 10%;
height: 100%;
background-color: #fff;
}
}<div class="pct-bar">
<span class="gogo"></span>
</div>Gif: 
The only way I've found so far is to set float to the child or display:flex to the parent, but hopefully that will answer the question. The text is translated by translator, if you have any questions, please feel free to ask, thank you
·
Juan Pablo Isaza
2 answers
Answer question0
For inline-block element there's line height in the play. Effectively your .gogo element lies on the baseline of the .pct-bar container (which has some default line-height). You can fix your issue by adding vertical-align: top; to the .gogo element.
.pct-bar {
height: 4px;
background-color: rgba(121, 121,121,.3);
}
.gogo {
display: inline-block;
width: 10%;
height: 100%;
background-color: #f00;
vertical-align: top;
}<div class="pct-bar">
<span class="gogo"></span>
</div>
·
Juan Pablo Isaza
Report
0
You could set min-height for .gogo
.gogo {
...
min-height: 1px;
}
sorry, got you wrong.
maybe display: table; might be an option?
·
Juan Pablo Isaza
Report
Answer question