我的页边空白顶部不会应用于我的锚标记

Question

我的一个类名为read more的标签在一个名为article text的div中，不知何故页边空白顶部不起作用，为什么会发生这种情况？

当我检查它时，在我看来似乎有一个页边空白，但似乎a标签不在html 的流中

这是我的代码笔的链接：https://codepen.io/jerico001/pen/MWppMdG

CSS

#Article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 5rem 10rem 5rem;
}
.article-cards-wrapper {
display: flex;
justify-content: space-evenly;
margin-top: -3rem;
width: 100%;
}
.article-container {
width: 150rem;
height: 75rem;
padding: 4.7rem;
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
border-radius: 0.5rem;
margin: 0.5rem;
}
.article-head h1 {
font-family: "Mulish", sans-serif;
font-size: 3.8rem;
font-weight: 300;
color: #00c3f4;
}
.article-head p {
font-family: "Mulish", sans-serif;
font-size: 2.8rem;
}
.article-body {
display: flex;
height: 19.3rem;
margin-top: 3.5rem;
}
.article-body img {
height: 19.3rem;
width: 86.3rem;
background-color : lightblue;
object-fit: cover;
}
.article-text {
height: 19.3rem;
margin-left: 3.1rem;
}
.article-body p {
font-family: "Mulish", sans-serif;
font-size: 2.3rem;
}
.read-more {
color: #00c3f4;
font-family: "Mulish", sans-serif;
font-size: 2.5rem;
font-weight: 500;
margin-top: 100rem;
}

Answer 1

将display: inline-block;样式添加到<a>标记中。垂直边距不适用于inline元素。

参考：SO评论