当边距和高度值不同时，渲染的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职位的不同建议，但似乎无济于事。这里发生了什么事？我究竟做错了什么？先谢谢您的帮助。