Html 保证金上限不适用于<；p>；及<；a>；标签？

我一直在尝试为链接按钮实现边距顶部，但它根本不起作用。我还尝试了“p”和“a”标记的内联样式

有3个li元素，我没有在这里发布完整的代码，因为它和第一个li元素相同

HTML

标记是一个内联元素，因此不能有上边距或下边距。但您可以通过应用

display:inline block到它。
这个问题被称为块元素上的
顶部
和
底部
页边距之间的问题，有时也会发生

相邻同级的边缘将塌陷

这就是为什么边距在
p
标记上不起作用的原因。要使其在此处工作，一个选项是在p标记上使用
padding top

在
a
标记上，边距不起作用，因为它是一个内联元素。您可能需要将其
display
属性更改为
inline block
或
block
尝试以下操作：

#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;
}

如果不先将
标记设置为
display:block，则无法在该标记上设置边距

在您的情况下，您需要这样做：

#services ul li p {
padding: 8px;
margin-top: 10px;}

链接标记
是内联块标记，它意味着它必须在其他元素旁边的一行中，并且应该有一个父部分，父部分确定这些内联块元素的顶部和按钮边距
有两种方法可以做到这一点：
将主题转换为块：

#services a{
display: block;
margin-top: 8px;
}

或者，您可以简单地使用它的
填充
只剩下页边空白，而roght工作正常
通过将显示器更改为flex解决了此问题。对于那些困惑和不同意的人，您是正确的。编程处理文字解释，塌陷的边距是一个人类强制执行的错误，在概念上暗示，而不是字面解释。但是，当完全有能力的人控制标准时，它最终将从规范中删除。通过谷歌搜索找到本文-我也有同样的问题，但您使用
display:inline block
证明是解决方案。谢谢
#services ul li p {
padding: 8px;
margin-top: 10px;}

#services a{
display: block;
margin-top: 8px;
}