Верстаю таблицу с рейтингом отзывов товара, нужны полоски, которые отображают наглядно сколько проголосовало в процентном соотношении за какую оценку товара. Прикрепляю скриншот html структуры, css кода. JS код не прикрепляю, т. к. это (наверное) баг на уровне CSS.
На скриншоте может быть не видно, в чем заключается проблема (его прикрепляю 5), описываю суть проблемы: я задаю контейнеру полоски высоту 2px, а ее дочерним элементам .background и .filled { height: 100% } , позиционирую их абсолютно относительно relative контейнера. Когда открываю результат в браузере, какие-то из полосок отклоняются от заданной высоты, визуально видно разницу в их высоте, хотя если посмотреть через инспектор - все ок, и там и там 2px. Ранее сталкивался с таким только когда использовал transform для элементов, сейчас не сосем понимаю природу этого явления. Заранее спасибо. !!!!! ЭТО ПОВЕДЕНИЕ ВОЗНИКАЕТ тогда, когда я задаю между итемами отступ:
.percentage .percentage__item:not(:last-child) {
margin-bottom: 17px;
}
Если убрать эту строку - этого нет, но, мне отступ нужен, и я хочу понять почему это возникает.
.percentage {
display: flex;
flex-direction: column;
outline: 1px solid red;
height: 100%;
color: black;
font-size: 1em;
}
.percentage .percentage__item {
display: flex;
align-items: center;
}
.percentage .percentage__item:not(:last-child) {
margin-bottom: 17px;
}
.percentage .percentage__item > .ls {
display: flex;
align-items: center;
box-sizing: border-box;
}
.percentage .percentage__item > .ls .band {
display: inline-block;
height: 2px;
background: #ccc;
width: 155px;
margin: 0 15px;
border-radius: 15px;
position: relative;
box-sizing: border-box;
}
.percentage .percentage__item > .ls .band .filled {
box-sizing: border-box;
position: absolute;
height: 2px;
width: 0;
display: inline-block;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #6B5EA4;
z-index: 2;
}
<div class="percentage">
<div class="percentage__item">
<div class="ls">
<div class="evaluation-value">5</div>
<div class="band">
<div class="filled"></div>
</div>
</div>
<div class="rs">
<div class="percentage__value">81%</div>
</div>
</div>
<div class="percentage__item">
<div class="ls">
<div class="evaluation-value">4</div>
<div class="band">
<div class="filled"></div>
</div>
</div>
<div class="rs">
<div class="percentage__value">9%</div>
</div>
</div>
<div class="percentage__item">
<div class="ls">
<div class="evaluation-value">3</div>
<div class="band">
<div class="filled"></div>
</div>
</div>
<div class="rs">
<div class="percentage__value">4%</div>
</div>
</div>
<div class="percentage__item">
<div class="ls">
<div class="evaluation-value">2</div>
<div class="band">
<div class="filled"></div>
</div>
</div>
<div class="rs">
<div class="percentage__value">2%</div>
</div>
</div>
<div class="percentage__item">
<div class="ls">
<div class="evaluation-value">1</div>
<div class="band">
<div class="filled"></div>
</div>
</div>
<div class="rs">
<div class="percentage__value">4%</div>
</div>
</div>
</div>