如何使边框不与另一个边框重叠，多选或单选？

Question

I have this sample code:

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
</div>

.container {
  display: flex;
  .square {
    display: inline-flex;
    width: 30px;
    justify-content: center;
    border: 1px solid black;
  }
}

And one problem is that if i add a border, it overlaps the next one.

And i know that if i want to fix that issue, i can just use SASS and target all divs but not the first and last one, and this problem would be solved. But this solution creates a new problem: If i select only the div of number 2 and not multiple elements, the div 2 will now not have all of his borders.

How to fix the first issue, without causing a second one? I dont think this is duplicated, since i'm having a problem caused by a fix.

If helps, i'm using React atm.

Answer 1

There are multiple solutions to this common problem.

Another would would be to shift every element but the first to the left by 1px (border-width)

Assuming your selection changes the color of the border. You can change the z-index while the element is selected. The same technique can also be used for your explained problem with the missing borders. To visualize this I added a hover styling.

 .container { display: flex; } .square { display: inline-flex; width: 30px; justify-content: center; border: 1px solid black; } .square:not(:first-child) { margin-left: -1px; } .square:hover { border-color: red; z-index: 1; }

 <div class="container"> <div class="square">1</div> <div class="square">2</div> <div class="square">3</div> <div class="square">4</div> </div>