How do I apply padding to all but one div so it is full width while other divs have breathing room.
I want to give breathing room to all elements on my page by just putting padding on the container. But there is a single item that acts as a breakout content. I want to negate the padding on that single item only. Negative padding is not a thing aparently, what's my next best option?
The only solution I could think of was creating a custom div element
divWithPadding and then use it everywhere in my jsx.
Just had a 💡 moment. Maybe... just maybe I can use max width instead of padding. I'll give it a shot but in the meantime if someone has any other idea let me know.3 Replies
negative padding isn't a thing, but negative margins are 😄
If I had a choice, I'd use grid here, and have a "main" area, and have the breakout go outside of that, but if you need to stick with your approach, I'd set the margin on the left and right to a negative value that matches your padding. Using a custom property makes this a lot easier - https://codepen.io/kevinpowell/pen/MWRvYJK
I went with the negative margin approach. thanks.
I am not sure I understand your grid method though. Can you elaborate?
This is what I had:
So, we have 10rem of padding, pushing all the elements inside the
main 10rem from the edges of it.
To be able to go into that empty space created by the padding, we can use negative margins to "pull" the element into the space.
margin-inline is, essentially, a shorthand for margin-left and margin-right.
We want a negative margin that matches the padding size, so I used a custom property to control that value. Then, the calc() is multiplying that number by -1, to make it the same number, but a negative instead of a positive.