Почему span не занимает всю высоту div?

Question

помогите плиз, почему span не занимает весь div?

div {
  width: 300px;
  border: 1.5px solid #434548;
  height: 40px;
  border-radius: 46px;
}

span {
  display: block;
  background-color: #434548;
  width: calc(100% / 3);
  height: 100%;
  border-radius: 46px;
  box-sizing: border-box;
}

<div>
    <span></span>
</div>

Answer 1

Вы там написали 1.5px А как половину пикселя должен нарисовать браузер? В разных экранах разные размеры пикслей. Напишите 2px и будет вам счастие.

div {
  width: 300px;
  border: 2px solid #434548;
  height: 40px;
  border-radius: 46px;
}

span {
  display: block;
  background-color: #434548;
  width: calc(100% / 3);
  height: 100%;
  border-radius: 46px;
  box-sizing: border-box;
}

<div>
    <span></span>
</div>

БЛОГ НА HUSL

Почему span не занимает всю высоту div?

Ответы (1 шт):