html - 为什么顶部和底部边距不适用？为什么要应用左边距？

Question

请在以下 html 和 css 片段中说明：-

html:

<p>Paragraph Text</p>
    <p>
        <a class="cta" href="#">Visit Blog</a>
    </p>
<p>Paragraph Text</p>

CSS：

a.cta  {
   font-size:18px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 40px;
}

1）为什么顶部和底部边距不适用于主播的“cta”类？
和
2）为什么左边距应用没有任何问题？

score 3 · Accepted Answer

您需要添加display: inline-block;到您的 CSS

CSS

a.cta  {    
    font-size:18px;    
    margin-top: 50px;    
    margin-bottom: 50px;    
    margin-left: 40px;
    display: inline-block;
}

说明：因为<a>是一个inline元素，内联元素不占用上、下边距，你需要使它成为块级元素，通过声明inline-block或block

内联和块级元素列表

score 1 · Accepted Answer

默认情况下，该a元素是“内联”元素。这意味着它与周围的文本显示在同一行。根据定义，内联元素没有上边距或下边距，只有左右边距。要添加顶部或底部边距，只需通过修改 CSS 将元素声明为“块”类型元素，如下所示：

a.cta  {
   display: block;
   font-size:18px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 40px;
}

但是，您需要注意，将其从内联元素更改为块元素确实会产生一些后果。例如，a标签中的文本将显示在它自己的部分中，位于它之前的文本下方。之后的任何文本都将显示在其下方的单独部分中，就好像它们都是单独段落的一部分一样。

score 0 · Accepted Answer

您必须为 a.cta 的父元素指定宽度和高度才能使边距生效。如果没有可使用的参考点，边距对您的浏览器没有多大意义。

p{宽度：100px；高度：100px；}

score 0 · Accepted Answer

另一种选择是将类应用于<p>元素而不是<a>. 我不知道这是否适用于您正在尝试做的事情，但它确实为您提供了您正在寻找的边距，而无需指定宽度。

HTML：

<p>Paragraph Text</p>
<p class="cta">
    <a href="#">Visit Blog</a>
</p>
<p>Paragraph Text</p>

CSS：

p.cta  {
font-size:18px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 40px;
}

-Marcectura

4 回答 4