DIV如何在两个不同的位置分别显示背景和文本？

Question

简介：我有一个<div>作为区块（主要），其中包含3个其他div（件）。我给我的divs绝对职位。首先效果很好。但是因为这个原因，我不知道孩子div开始在屏幕上两个不同位置显示背景和文本的原因：

截屏：红色，黄色，蓝色矩形是“片段”，主要位于它们的后面。 “ hello world”，“ random text”等下面的文本应该显示在彩色背景的顶部，因为它只是每个div的innerHTML。不仅背景和带有文本的区域都在接收鼠标事件。右侧是控制台，每个控制台都有一些样式。

问题：我需要了解如何实现？哪些CSS属性会导致这种情况？我正在JavaScript中设置所有CSS属性。因此，还没有样式表。

<div class="main" style="background-color: rgb(240, 240, 240); color: black; display: block; height: 96px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; z-index: 1000; left: 127px; top: 302px;">
	<div class="piece" style="background-color: rgb(255, 64, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 0px; right: 128px; bottom: 32px; line-height: 32;">hello world</div>
	<div class="piece" style="background-color: rgb(255, 255, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 32px; right: 128px; bottom: 64px; line-height: 32;">random text</div>
	<div class="piece" style="background-color: rgb(64, 64, 255); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 64px; right: 128px; bottom: 96px; line-height: 32;">goodbye world</div>
</div>

我认为它与piece.style.height = 32;或piece.style.height = "32px";有关，但是从来没有在水平方向上发生过。

Answer 1

您必须将线高的尺寸指定为与div相同。 line-height: 32px如果未指定单位，浏览器将使用此数字（32）乘以元素的字体大小（16px）= 512px。这就是为什么文本会全部落在页面上。

<div class="main" style="background-color: rgb(240, 240, 240); color: black; display: block; height: 96px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; z-index: 1000; left: 127px; top: 302px;">
	<div class="piece" style="background-color: rgb(255, 64, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 0px; right: 128px; bottom: 32px; line-height: 32px;">hello world</div>
	<div class="piece" style="background-color: rgb(255, 255, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 32px; right: 128px; bottom: 64px; line-height: 32px;">random text</div>
	<div class="piece" style="background-color: rgb(64, 64, 255); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 64px; right: 128px; bottom: 96px; line-height: 32px;">goodbye world</div>
</div>

Answer 2

是由内联CSS line-height: 32;引起的。好像行高应用于每个div，但应用于其中的文本。

我认为line-height通常适用于h1，h2，p等