对元素填充产生边际效应？

Question

我有一个带底边的元素，下面是一个带填充的元素。边距对元素的文本有效，而不是对其填充。如何使其对包括填充在内的元素有效？

p {
  margin-bottom: 50px;
}
a {
  padding: 40px;
  background: green;
}
<p class="first">First</p>
<a href="#">Link</a>

http://codepen.io/anon/pen/LGmevv

Answer 1

尝试将display:block或display:inline-block添加到a。

Answer 2

你需要阅读有关块和＆amp;内联html元素;

a (<a/>） - 是一个内联元素，其中一个不能有垂直填充，将其转换为块

display: block

或进入内联块：

display: inline-block;

Answer 3

您需要将display: inline-block添加到a标记：

a {
  padding: 40px;
  background: green;
  display: inline-block;
}

如果没有这个，a标签将“忽略”填充，不会让它影响元素的高度或宽度。

Answer 4

您应该将display:inline-block添加到锚点以获得所需的结果。

你的最终css应该是

p {
 margin-bottom: 50px;
}
a {
 padding: 40px;
 background: green;
 display:inline-block;
} 

Answer 5

内联元素不受垂直边距的影响。使您的锚标记显示：inline-block

Answer 6

只需尝试这个

＆＃13;

＆＃13;

p {
    float: left;
    margin-bottom: 50px;
    overflow: -moz-hidden-unscrollable;
}

a {
    background: green none repeat scroll 0 0;
    clear: both;
    float: left;
    padding: 40px;
}

＆＃13;

<p class="first">First</p>
<a href="#">Link</a>

＆＃13;

＆＃13;

＆＃13;