html - 使用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>

这是我看到的:

为什么顶部的边距这么大，而文本标题这么低？ 您可以在此处查看网络上实际页面的示例: http://www.nanogomo.com/sample1.html

有趣的是，如果我向其中添加更多内容，它会将文本推高。

Answer 1

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

#wrapper::before {
    content: '';
    display: block;
}

flex 容器包含 3 个元素 home-back、post 和 before。 Before 是绝对定位的，所以它从正常流中移除(不占用空间)。 Before(没有宽度)和 post 位于主轴上(垂直，因为方向是 flex 列)，带有 justify-items: space-between(主轴是垂直的)。