Kevin Powell - Community•9mo ago

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?

<main style={{ paddingInline: '20rem' }}>
    <div></div>
    <div></div>
    <breakout> I should not have paddingInline </breakout>
    <div></div>
    <div></div>
</main>

<main style={{ paddingInline: '20rem' }}>
    <div></div>
    <div></div>
    <breakout> I should not have paddingInline </breakout>
    <div></div>
    <div></div>
</main>

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

Kevin Powell•8mo ago

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

Kevin

CodePen

breaking out of padding

...

o_OOP•8mo ago

I went with the negative margin approach. thanks. I am not sure I understand your grid method though. Can you elaborate?

Kevin Powell•8mo ago

This is what I had:

main {
  --main-padding: 10rem;
  padding: var(--main-padding);
  background: lightblue;
}

div.breakout {
  margin-inline: calc(var(--main-padding) * -1);
}

main {
  --main-padding: 10rem;
  padding: var(--main-padding);
  background: lightblue;
}

div.breakout {
  margin-inline: calc(var(--main-padding) * -1);
}

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.

Gaming

Programming

How do I apply padding to all but one div so it is full width while other divs have breathing room.