我一直在尝试为链接按钮实现边距顶部,但它根本不起作用。我还尝试了“p”和“a”标记的内联样式
有3个li元素,我没有在这里发布完整的代码,因为它和第一个li元素相同
HTML
<;div id=“服务”>;
<;ul>;
<;李>;
<;img src=”https://stackoverflow.com/questions/20975091/images/service.png“alt=”“/>;
<;p class=“服务标题”>;服务1</p>;
<;p>;阿梅特·尼西·波尔蒂托·埃尼产妇,克拉斯!奥迪奥·普尔维纳尔是个笨蛋?坐下来。奥古斯·泰米尔·朗卡斯·尼西·ac普尔文纳名言</p>;
<;p>&书信电报;a href=“”>;阅读更多</a></p>;
</李>;
</ul>;
</部门>;
下面是上述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标记上,边距不起作用,因为它是一个内联元素。您可能需要将其显示属性更改为内联块或块