h1的绝对定位导致元素周围有额外的填充

Question

我有一个div周围的h1元素，我试图把绝对在屏幕上。
但是，当我将div的位置更改为绝对位置时，h1元素的上方和下方都有一个无法删除的额外空间。

.parent {
width: fit-content;
height: fit-content;
position: absolute;
top: 0px;
}

h1 {
// no styling
}

在这个

形象显示了空格问题。

绿色的轮廓是绝对位置的父div，蓝色的是里面的h1。当位置为绝对时，h1周围总是有额外的间距。

Answer 1

您可以删除/重置或调整父div的边距和内边距。
就像下面的示例代码。

.main {
background-color: red;
width: 55px;
height: 80px;
margin: 0;
padding: 0 24px;
position: relative;
}

.parent {
width: fit-content;
height: fit-content;
position: absolute;
top: 0px;
background-color: blue;
}
h1 {
background-color: green;
}

<div class="main">
<div class="parent">
<h1>Test</h1>
</div>
</div>