Отображается высота div, когда значение поля и высота отличаются - PullRequest
0 голосов
/ 11 ноября 2018

Я пытаюсь создать стек строк, используя 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, но, похоже, ничего не работает. Что тут происходит? Что я делаю неправильно? Заранее спасибо за помощь.

...