Discussion on "CSS to ignore parent padding in 4 lines"

Milind Soorya · 2021-09-18T17:11:27.073Z

Introduction CSS is damn hard. It's these small problems that will take up your entire day and energy and the will to live. And one such notorious problem has been to make a child element break out of their parent's padding. The problem I recently t...

Hm, I double checked your website, and it doesn't look like there is a padding on that newsletter div. Also, 100vw wouldn't work on desktop, as it counts 100vw with the scrollbar width. In case of padding your 100% would be width minus the padding.

Try it ;) add padding to the main div you have there and check if your CSS still works - plot twist, it doesn't.

CSS is weird and I give you that, just please please pretty please, double check your "tutorials" before spreading the tip, that's actually not working.

Smarter solution for this kind of case is using negative margins and having width with calc(100% + 2x your margin). Setting max width to 100vw would do the job on mobile devices tho, as there is no scroll space taken into an account when counting the viewport width.

Hello Angie, Thanks for pointing it out. I am really sorry for not explaining it properly.

The above code snippet indeed works fine, At the time of writing this particular article, the newsletter component was within the body tag, but after some time I thought it would be best to add the newsletter to all the pages and I decided to move the newsletter component to the same level as my main div(There is a container div for my entire website which wraps around the head, navbar, main and footer elements).

In doing so I was able to bypass the padding issue even without the above code snippet, as my main tag, the section containing the newsletter, all reside at the same level.

As I mentioned in the article. there are numerous ways to fix this small issue. Thanks for sharing yours. Also, by setting max-width: 100%; you won't have to worry about the scroll space.

Milind Soorya, still not a fix tho ;) Just try it, really.

Unless you're NOT* using box-sizing: border-box, your max-width: 100% will be 100% - the padding on the parent, meaning, the effect "before" and "after" is gonna be exactly the same.

I created a pen with your solution and mine underneath: codepen.io/Yzoja/pen/bGRvOjY

Added the scroll to main to make sure it works just as well when the scroll is visible.

*Not using box-sizing: border-box is fairly unsafe, because it means you have to count off every padding with elements set to 100% width. So, if you did it: don't.

Search Hashnode

CSS to ignore parent padding in 4 lines

Responses1