How to reduce the vertical space above and below a ul list with one command?
-
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)
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
marginof theullist. I experimented a bit and I think the default values for spacing are1emtop and bottom. The strange thing is that when decreasing from1emto0emnothing happens, so I had to go negative and find out that a good value is-0.5em
Then I tried the same but with
divinstead of text
This time the vertical space already changes when decreasing from
1emto0em, so to decrease as much as in the previous case, I had to set a value of0.5em. By futher decreasing to-0.5emthe vertical spacing is reduced too much.
So in the case of a
divbefore the list and text after the list (and viceversa), two differentmarginvalues have to be set in order to have equal spacing above and below
And maybe there are other types of objects which needs different
marginvalues.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?
-
I can’t since I’m working on localhost, I can show you screens from the inpector tool though:
Oh thank you very much, I never heard about “sum” of objects.
I played a bit and this seems to do the job.div+ul { margin-top: 0.5em; } .ul+div { margin-top: -0.5em; } .p+ul { margin-top: -0.5em; } .ul+p { margin-top: -0.5em; }This code works for the cases
p+ul+p,p+ul+div,div+ul+panddiv+ul+div.I’m gonna test this in other situations.
Do you know if using the
+notation is possibile to aim for a specific class?
For example, say we want to apply.p+ul {...}but only for thepclassredtext, is it possibile to write something like.redtext p+ul {...}?Thank you again!
- The topic ‘How to reduce the vertical space above and below a ul list with one command?’ is closed to new replies.