1

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: problem

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

Elikill58
  • 4,050
  • 24
  • 23
  • 45
azin
  • 11
  • 1

2 Answers2

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
  • 786
  • 7
  • 12
  • Bravo! I just assumed that inline-block should have made it work, but I didn't consider the line height. +1 – Yogi Apr 01 '22 at 11:59
-2

You could set min-height for .gogo

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

sorry, got you wrong.

maybe display: table; might be an option?

Marc
  • 1