Я пытаюсь создать стек строк, используя div. То, что кажется относительно простой задачей, оставило меня ошеломленным, потому что визуализированная высота div не одинакова, в то время как в css они имеют одинаковую высоту. Забавно, что если значение поля margin-bottom совпадает с высотой div, высота div отображается правильно. Но я хочу, чтобы поле было в два раза больше, чем высота div. Вот мой код.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}
<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
Я пробовал разные предложения из разных постов SO, но, похоже, ничего не работает. Что тут происходит? Что я делаю неправильно? Заранее спасибо за помощь.