[Vuejs]-Why a div with a small height (4px) cannot fit an element？The child element is displayed outside

by

1👍

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>
👤Paul Kozlovitch

-2👍

You could set min-height for .gogo

.gogo {
    ...
    min-height: 1px;
}

sorry, got you wrong.

maybe display: table; might be an option?

👤Marc

Leave a comment