3 ms·
> Adding a border changes the size of the items, which might not be desirable This issue has been addressed for well over a decade. Is the first line of every
by donatj 2y ago
> Adding a border changes the size of the items, which might not be desirable
This issue has been addressed for well over a decade.
Is the first line of everyone's css files not just:
* { box-sizing: border-box; }
That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.
- do_not_redeem 2y agoThat does not solve the problem in the article. Consider this layout: <content1> <content2> <content3> If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually: <content1> <border> <content2> <border> <content3> The DOM actually looks like this: <content1> <border content2> <border content3> Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.
- yojo 2y agoYou just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy! That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
- yojo 2y agoOh, and don’t forget to update the styles or class name via JavaScript if you want to support drag and drop without it looking incredibly janky.