PROBLEM: 如何减少ul列表上方和下方的垂直空间,而不必根据列表前后的对象定义不同的类?也就是说,无论列表上下的对象是什么,是否可以仅使用一个类来减少固定数量的空间?
这是wordpress列表中的默认垂直间距(代码在左侧,输出在右侧)

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

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

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

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

也许还有其他类型的物体需要不同的
margin
价值观
我希望我可以全局地设置列表的垂直间距,而不必定义不同的类,并且在每次使用列表时手动设置正确的类。
我是做错了什么,还是必须这样做?难道没有一种方法可以全局设置空间,并且不用担心每次都要使用列表吗?
最合适的回答,由SO网友:sound wave 整理而成
从1em
到0em
因为列表上方和下方的文本插入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; }