为何选择top＆amp;底部保证金不适用？为什么左边距适用？

Question

请在以下html＆amp;中告诉我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）为什么顶部＆amp;底部边距不适用到主播的“cta”类？。
和
2）为什么左边距适用没有任何问题？。

Answer 1

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

Demo

CSS

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

说明：由于<a>是一个inline元素，因此内联元素不会占据顶部，底部边距，您需要通过声明inline-block或{{来使其成为块级元素1}}

List内联和块级元素

Answer 2

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

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

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

Answer 3

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

p {宽度：100像素;高度：100像素;}

Answer 4

另一种选择是将类应用于<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;
}​

JsFiddle。

-Marcatectura