html - 边距和高度值不同时渲染的 div 高度不同

Question

我正在尝试使用 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 帖子的不同建议，但似乎没有任何效果。这里发生了什么事？我究竟做错了什么？在此先感谢您的帮助。

标签： htmlcssheightmargin