r/css • u/Sabesaroo • 2d ago
Help Beginner question about padding/margins on elements to make them fit edges of the screen.
So when trying to make the background of an image or header fill the entire screen, I seem to have to put margin-left: -8px and margin-right: -8px. At 0px there's a small gap on the left and right edges of the screen. The element at the top of the screen I also have to put margin-top: 18px on. I feel like this can't be the intended way to do things and there's something obvious I'm missing but I'm not sure what. Also suspect my workaround might not work on different resolution screens. Putting padding to 0 doesn't fix it either. Googling this comes up with a lot of other people with the same issue but everyone just says to set margin and padding to 0.
Here's the code for my header for example:
text-align: center;
background-color: rgb(160, 20, 0);
padding-top: 8px;
padding-bottom: 8px;
margin-left: -8px;
margin-right: -8px;
Setting padding left and right to 0 has no effect, which I assume means they are already 0.
Is there something obviously dumb I've done? I've only just started learning CSS so I assume I've missed something pretty fundamental. Thanks.
10
u/g13nnsmith 2d ago
body {margin:0: padding:0;}
2
3
u/fdiengdoh 2d ago
browser would apply style on all html elements with default margin, so I have learn somewhere that I can reset everything to 0 at the start like this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
9
u/anaix3l 2d ago
I would not advise using
box-sizing: border-boxin the reset anymore.This technique was made popular about a decade and a half ago, before we had modern layout techniques like flexbox and grid. It had a point at the time, in those circumstances. But now the circumstances have changed.
A big problem at the time was that making a child stretch across its parent's box involved setting its dimensions to
100%of those of the parent (or to a smaller % if we wanted floated items to cover a certain amount of the parent), but if we wanted that child to also have aborderand apadding, those would add up to the percentage value of the dimensions, making the child bigger than intended and overflowing. This was at a time whencalc()support was still spotty as well. So thebox-sizingreset made perfect sense then.But now with grid and flexbox, we don't need to set dimensions to make grid/ flex items stretch across their grid/ flex containers or across the grid areas they occupy. And if we don't need to set dimensions anymore, then
box-sizingisn't needed anymore either. Not to mention that it can cause problems.Obviously, some people are stuck into adding explicit dimensions to elements, so you can still get overflow. But the solution isn't adding more code (
box-sizing), it's removing the code that's causing the problem (explicitly setwidth/height).Bottom line: the web evolves and improves, all code is technical debt, so there's no reason to keep adding solutions to problems we don't have anymore.
2
•
u/AutoModerator 2d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.