CSS高度属性表现得很糟糕

Question

我在div中有一个div，但是当我将高度和宽度设置为div时，高度存在问题。它更容易向您展示我的问题。

这是我的代码：

.prodContent1 {
	position: absolute;
	background-color: #e1e1e1;
	border: 1px solid #ddd;
	width: 100%;
	box-sizing: border-box;
	height: 300px;
	z-index: 1;
	display: none;
}
.prod-div {
	background-color: grey;
	width: 20px;
	height: 20px;	
	box-sizing: border-box;
	
}

<div class="prodContent1" id="prodCont1">
    <div class="prod-div">
    </div>
	
</div>

正如你所看到的，即时设置宽度和高度是相同的，因此期望div是一个立方体。但是当我在浏览器中查看时，这就是我所看到的:(这是一个小的灰色框）

我无法弄清楚为什么会这么高。我甚至尝试将高度设置为1px，并在浏览器上使用测量工具，我发现它是我设置的高度的4倍。 （不要担心显示：无，这是一个下拉div。）

有没有人经历过这个？

Answer 1

你在这里发布的代码是好的（除了display：none;，这使我们看不到它）所以问题可能出在代码的其他部分：

.prodContent1 {
	position: absolute;
	background-color: #e1e1e1;
	border: 1px solid #ddd;
	width: 100%;
	box-sizing: border-box;
	height: 300px;
	z-index: 1;
}
.prod-div {
	background-color: grey;
	width: 20px;
	height: 20px;	
	box-sizing: border-box;
}

<div class="prodContent1" id="prodCont1">
    <div class="prod-div">
    </div>
</div>

Answer 2

我明白了。我有四个同一个班级的div，因此他们都加在一起，形成一个高大的方块。愚蠢的错误，我的错。