Html 边距顶部不适用于 <p> 和 <a> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20975091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Margin-top not working for <p> and <a> tag?
提问by Orahmax
I have been trying to implement margin-top for a link button but it doesn't work at all. I have also tried inline styles for both 'p' and 'a' tag.
我一直在尝试为链接按钮实现 margin-top ，但它根本不起作用。我还尝试了 'p' 和 'a' 标签的内联样式。
There are 3 li elements, i haven't posted whole code here as it is same as first li element.
有 3 个 li 元素，我没有在这里发布完整的代码，因为它与第一个 li 元素相同。
HTML
HTML
<div id="services">
<ul>
<li>
<img src="images/service.png" alt=""/>
<p class="service-heading">Service 1</p>
<p>Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst</p>
<p><a href="#">Read More</a></p>
</li>
</ul>
</div>
Here is the css code for the above html. css code:
这是上述html的css代码。css代码：
#services{
background-color: #afc1ff;
height: 490px;
padding: 5%;
border-top: 5px solid #4972ff;
border-bottom: 5px solid #4972ff;
}
#services ul{
/* background-color: red; */
margin: 0;
padding-left: 10px;
padding: 0 0 0 50px;
}
#services ul li{
display: inline-block;
width: 22%;
padding: 1%;
margin: 0 4% 0 4%;
color: #4c4c4c;
font-size: 14px; font-size: 1.4rem;
text-align: center;
}
.service-heading{
font-size: 18px; font-size: 1.8rem;
}
#services ul li a{
background-color: #4972ff;
color: #fff;
border-bottom: 3px solid #779bff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 8px;
margin-top: 10px;
}
回答by DaniP
This issue is known as Margin Collapseand happens sometimes between topand bottommargins on block elements.
这个问题被称为保证金收起和之间有时会发生top与bottom上块元素边距。
The margins of adjacent siblings are collapsed
相邻兄弟的边距折叠
That's why the margin doesn't work on the ptag. To make it work here an option is to use padding-topon the p tag.
这就是边距在p标签上不起作用的原因。为了让它在这里工作，一个选项是padding-top在 p 标签上使用。
And on the atag the margin doesn't work because it's an inline element. You may need to change its displayproperty to inline-blockor block.
并且在a标签上边距不起作用，因为它是一个内联元素。您可能需要将其display属性更改为inline-block或block。
回答by Lars Beck
The <a>tag is an inline element and therefore cannot have a top or bottom margin. But you can solve this by applying display: inline-block;to it.
该<a>标签是一个内联元件，因此不能具有顶部或底部边缘。但是你可以通过应用display: inline-block;它来解决这个问题。
回答by Navid
the link tag <a>is inline block tags and it means it must be in one line beside other elements and should has a parent part that the parent part determines how much these inline-block elements should have margin top and button
there's two ways to do that:
convert theme to block:
链接标签<a>是内联块标签，这意味着它必须在其他元素旁边的一行中，并且应该有一个父部分，父部分决定这些内联块元素应该有多少边距顶部和按钮有两种方法可以做到这一点：将主题转换为块：
#services a{
display: block;
margin-top: 8px;
}
or simply you can work with its padding
或者干脆你可以使用它 padding
回答by elad BA
Had the same issue only margin left and roght worked solved it by changing the display to flex
有同样的问题只剩下边距和 roght 工作通过将显示更改为 flex 来解决它
回答by luke
Try this:
尝试这个：
#services ul li a{
background-color: #4972ff;
color: #fff;
border-bottom: 3px solid #779bff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 8px;
position: relative;
top: 10px;
}
回答by wickywills
You won't be able to set a margin on an <a>tag without first setting it to display:block;.
如果<a>不先将标签设置为 ，您将无法在标签上设置边距display:block;。
In your case, you need to do something like this:
在您的情况下，您需要执行以下操作：
#services ul li p {
padding: 8px;
margin-top: 10px;}
