如何用一条命令统一缩小一个ul列表上下的垂直空间?

时间:2019-10-26 作者:sound wave

PROBLEM: 如何减少ul列表上方和下方的垂直空间,而不必根据列表前后的对象定义不同的类?也就是说,无论列表上下的对象是什么,是否可以仅使用一个类来减少固定数量的空间?

这是wordpress列表中的默认垂直间距(代码在左侧,输出在右侧)

enter image description here

我认为间距太大了,所以我想缩小它,我发现我必须修改顶部和底部marginul 列表我做了一些实验,我认为间距的默认值是1em 顶部和底部。奇怪的是1em0em 什么都没有发生,所以我不得不去负,并发现一个好的值是-0.5em

enter image description here

然后我尝试了同样的方法div 而不是文本

enter image description here

这一次,垂直空间在从1em0em, 因此,要像前一种情况那样减少,我必须设置一个值0.5em. 进一步降低至-0.5em 垂直间距减少太多。

enter image description here

所以在一个div 在列表之前和列表之后的文本(和viceversa),两个不同的margin 必须设置值,以便上下间距相等

enter image description here

也许还有其他类型的物体需要不同的margin 价值观

我希望我可以全局地设置列表的垂直间距,而不必定义不同的类,并且在每次使用列表时手动设置正确的类。

我是做错了什么,还是必须这样做?难道没有一种方法可以全局设置空间,并且不用担心每次都要使用列表吗?

1 个回复
最合适的回答,由SO网友:sound wave 整理而成

1em0em 因为列表上方和下方的文本插入p 标记依据wpautop 函数,并且在我的样式表中p { margin: 1em 0; } 因此1em 重叠的空间。

使用+ 相邻同级选择器(详细信息here)

div + ul { margin-top: 0.5em; }
ul + div { margin-top: -0.5em; }
p + ul { margin-top: -0.5em; }
ul + p { margin-top: -0.5em; }