使用css将文本与html代码中的网页顶部对齐

Question

我有这个css代码：

.post {
    margin-top: 0.5em;
    margin-left: 2em;
    margin-right: 2em;
    text-align: center;
}

.post p{
    max-width: 1200px;
    padding: .5em;
    text-align: justify;
    margin: 0;
    top: 1.25em;
}

.post h1{
    text-align: center;
}

并在html中有这个：

<div class="post">  
 <h1>Title of Sample Work 2</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus id nisl ut suscipit. Nullam vel justo tellus. Suspendisse vehicula rhoncus nunc sed accumsan. In hac habitasse platea dictumst. Mauris vel dolor velit. Phasellus finibus massa mauris, at interdum nisl luctus at. Etiam porttitor, metus non dapibus pretium, orci arcu pretium nulla, eget congue augue libero at lectus. Mauris pretium urna tristique, laoreet enim rhoncus, euismod tortor.</p>
</div>

这就是我所看到的：

为什么顶部有这么多的边距，文字标题如此之下？ 您可以在此处查看Web上实际页面的示例： http://www.nanogomo.com/sample1.html

有趣的是，如果我添加更多内容，它会推动文本。

Answer 1

因为#wrapper有display：flex并且有一个before。你应该删除以下内容：

top: 100%

Flex容器包含3个元素，包括home-back，post和before。之前绝对定位，以便从正常流程中移除（不占空间）。之前（没有宽度）和柱子位于主斧上（垂直因为方向是弹性柱），带有对齐物品：间隔（主斧是垂直的）。

Answer 2

使用保证金顶部并根据需要给出价值。

.post h1{
    text-align: center;
    margin-top: -7px;
}

Answer 3

尝试将值设置为边距和填充：

.post h1{
    text-align: center;
    margin: 0px;
    padding: 0px;
}