我的边距顶部没有应用于我的锚标签[重复]

Posted 2023-03-06

【中文标题】我的边距顶部没有应用于我的锚标签[重复]

【英文标题】：My margin top does not get applied to my anchor tag [duplicate]

【发布时间】：2021-08-12 03:06:54

【问题描述】：

我的一个类名为 read-more 的标签在一个名为 article text 的 Div 中，不知何故，margin top 不起作用，为什么会这样？

当我检查它时，在我看来有一个边缘顶部，但似乎 A 标记超出了 html 的流程

这是我的 codepen 的链接：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;

【参考方案1】：

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

参考：SO comment