intersecting borders
How can I prevent div borders from being accumlated on top of each other like here https://codepen.io/sos909/pen/GRLPyzy
The border between the 2 divs is wider than all the other sides, how can I make it consistent
22 Replies
try
margin: -1px on the 2nd divThat works but I have alot of divs so I want something that works without having to manually add margin for specific divs
I tried using
outline instead of borders and it works but when I added background-color the width of the outline decreases for some reasonThis is using outline
see how the top side of the div is thinner than the bottom
These are the only styles being appiled to that element
the outline is "outside" the size of the element
what you can do is skip the border
border-collapse seems to only work on tableswdym by skip the border
border-top: noneBox-shadow is another one you could try, like outline it doesn’t take up space.
or
border-top-width: 0
the downside of those is that it doesn't take up spaceYou can do this
Or this
the top one is easier to read
instead of
.box + .box, you can use .box + *
it's slightly different, but for this example it does the same
oh, another idea: margins collapse, so, set a background to the parent element and set a different background for the .box with a marginI tried adding
z-index: -1 to all my colored divs and now its working
It was something with the order of displaying I think
using outlines btwDO NOT DO THAT!
that is an horrible idea
what why
NEVER EVER EVER GO NEGATIVE unless you know what you're doing
it introduces tons of issues
mostly: anything and everything will get in front of it, the background won't work properly
and other weird stuff will happen
what if I set
z-index: 100 to all my uncolored divsthat's bad
it will get in front of other stuff
you will then be fighting to keep menus and other things on top
in the end, you will be setting
z-index: 99999999999999999999 to everything you want always on top
which is also very badif possible for your use case. i would wrap it in a separate div. and give that wrapper an outline with the same width
that works, but limits the outline usage
or shadow or border
however, you should never have focus on a div, so, it's fine