0

PROBLEM: How to reduce the vertical space above and below a ul list without having to define different classes according to the objects before and after the list? That is, is it possibile to reduce the space of a fixed quantity using only one class regardless of the objects above and below the list?

This is the default vertical spacing in a wordpress list (code on left, output on right)

enter image description here

I think that the spacing is too much, so I would like to reduce it and I find out that I have to modify the top and bottom margin of the ul list. I experimented a bit and I think the default values for spacing are 1em top and bottom. The strange thing is that when decreasing from 1em to 0em nothing happens, so I had to go negative and find out that a good value is -0.5em

enter image description here

Then I tried the same but with div instead of text

enter image description here

This time the vertical space already changes when decreasing from 1em to 0em, so to decrease as much as in the previous case, I had to set a value of 0.5em. By futher decreasing to -0.5em the vertical spacing is reduced too much.

enter image description here

So in the case of a div before the list and text after the list (and viceversa), two different margin values have to be set in order to have equal spacing above and below

enter image description here

And maybe there are other types of objects which needs different margin values.

I was hoping I could set globablly the vertical spacing of the list, without having to define different classes and manually set the correct class each time I have to use a list.

Am I doing something wrong or is this how the job has to be done? Isn't there a way to set globally the space and don't have to worry every time a list has to be used?

0

Nothing happens when decreasing from 1em to 0em because the text above and below the list is inserted in p tags by wpautop function, and in my stylesheet I had set p { margin: 1em 0; } hence there is a 1em space which overlapps.

The problem is solved globally using the + adjacent sibling selector (read more 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; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.