How to Adjust Padding for Closer Sections in CSS

·

I have two sections and I want them to be closer together. I can see the padding is set on padding-section-small, but I don't know how to remove just one half of the padding (i.e. the bottom or the top) without messing things up elsewhere.

8 comments

Emily M.
·
Bonus points if I can do this on one instance of a component
Samir T.
·
you can add a combo class padding-top or padding-bottom or even padding-0 if you want to remove the spacing from top and bottom at the same time
👌1
Matt J.
·
Emily M. I think to do this on an instance of a component, you would want to make sure the component is the actual component without the padding wrappers, and then on a per instance basis, wrap the component on that page with the padding wrappers - if that makes sense? That way you have finer control over when there is padding and not since all you really should need in a component is the "content" of the component without the wrappers.
Matt J.
·
gosh, I hope you understand what I mean but I wouldn't be surprised if you didnt haha.
Emily M.
·
Yesss that does make sense! I guess I should change how i think of sections, from things that hold one component each, to things that can hold many
Matt J.
·
Yeah for sure - also you can nest components too!
Matt J.
·
But id be carefully with nesting too deep though it’ll have some performance implications
Samir T.
·
One other way is to use spacers and add a conditional visibility to them, inside the component. So each section will have a spacer-top and spacer-bottom and you'd be able to turn it on/off outside the component. I personally find this to be the easiest to manage when you have multiple instances in the same listing
💯1