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

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

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

HTML

<div id=“服务”>
<ul>
<李>
<img src=”https://stackoverflow.com/questions/20975091/images/service.png“alt=”“/>
<p class=“服务标题”>服务1&lt/p>
<p>阿梅特·尼西·波尔蒂托·埃尼产妇,克拉斯!奥迪奥·普尔维纳尔是个笨蛋?坐下来。奥古斯·泰米尔·朗卡斯·尼西·ac普尔文纳名言&lt/p>
<p&gt&书信电报;a href=“”>阅读更多&lt/a&gt&lt/p>
&lt/李>
&lt/ul>
&lt/部门>

下面是上述html的css代码。
css代码:

#服务{
背景色:#afc1ff;
高度:490px;
填充:5%;
边框顶部:5px实心#4972ff;
边框底部:5px实心#4972ff;
}
#服务ul{
/*背景色:红色*/
保证金:0;
左侧填充:10px;
填充:0 50px;
}
#服务业{
显示:内联块;
宽度:22%;
填充:1%;
利润率:04%04%;
颜色:#4c;
字体大小:14px;字体大小:1.4rem;
文本对齐:居中;
} 
.服务标题{
字体大小:18px;字体大小:1.8rem;
}
#服务ulli a{
背景色:#4972ff;
颜色:#fff;
边框底部:3px实心#779bff;
边界半径:5px;
-webkit边界半径:5px;
-moz边界半径:5px;
填充:8px;
边缘顶部:10px;
}

此问题称为边距折叠,有时发生在块元素的顶部底部边距之间

相邻同级的边缘将塌陷

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

a标记上,边距不起作用,因为它是一个内联元素。您可能需要将其显示属性更改为内联块

发表评论