Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
Yep inner padding is something I learned early on - it has prevented a lot of extra work.
-
kiki352493y@ojt-rant it’s not about paddings. It’s about border-box. Matter of fact, all my websites include this:
*, *::before, *::after { box-sizing: border-box; }
https://github.com/mvoloskov/... -
@kiki right... it's not only about paddings, but also borders and inflation of content area.
-
damn u really are god.
Can you help me fix my dumb page if i pay with virtual hugs and positive messages lmao -
@kiki ah yes sorry, I misread your comment. I was thinking about "box-sizing: content-box;" If you apply that to your element, the padding acts as an inner padding. Which means if you add padding to it, you'll never accidentally push the element outside of your maximum allowed width or height (unless of course the content of the box does that for you).
Related Rants
-
kiki2css quick maffs so, you want to make a css gradient from a certain color into transparent. The logical way wo...
-
kiki4CSS quick maffs You need to make a responsive grid that should wrap its columns on smaller screens. That's wh...
-
kiki24Afraid of CSS? Here’s a snippet of completely valid stylesheet to ease your anxiety: .container { break-bef...
css quick maffs
so you did this:
.foo:hover {
transform: scale(1.1);
}
and now ugly scrollbar is there when the element is scaled.
No, don't do overflow: hidden. There's a better way. Instead, do this:
.container {
padding: 1rem;
box-sizing: border-box;
}
the element total width is calculated based on the width of its content. That's true unless you specified width and height explicitly (if you did so, you're a doofus, I'm sorry).
Scaling makes content somewhat larger. With border-box, paddings work differently with the total width.
By default, if you set width to say 100px, and paddings are 20px, total width will be 140px — it's your 100px of content plus two paddings of 20px. width property set the width of the content, not the total width.
With border-box, width property sets the total width. So if you set width to 100px and paddings to 20px, total width would be 100px, just like you set it, and content will be 60px wide — it's 100px minus 20px times two.
The key part is it doesn't end with explicit width. The algorithm remains. When some node is rendered, its total width is calculated. When you use border-box, the total width will stay the same even if your content grows by some value that is less than your paddings. So, your content was 100px, you scaled it, and it became 110px. Well, then that extra 10px will be subtracted from your paddings, and they will be 15px each instead of 20px.
No more ugly scroll bar. Yaaay!
aight bye
random
kiki the css god