对元素填充产生边距效果？答案

【问题标题】：Make margin effect on elements padding?对元素填充产生边距效果？
【发布时间】：2016-05-05 19:17:24
【问题描述】：

我有一个带有底部边距的元素，在它下方有一个带有填充的元素。边距对元素的文本有效，对内边距无效。如何使其对包括填充在内的元素有效？

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

你需要了解块和内联 html 元素；

a(<a/>) - 是一个不能有垂直填充的内联元素，把它变成块

display: block

或进入内联块：

display: inline-block;

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

你的最终css应该是

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

【讨论】：

【解决方案5】：

内联元素不受垂直边距的影响。让你的锚标签显示：inline-block

【讨论】：

【解决方案6】：

试试这个

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

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

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

【讨论】：