There are two blocks, one under is under the other. Both have a top and bottom border.

It turns out that the upper limit of the lower block climbs to the lower limit of the upper block. Is it possible to somehow make it so that there is no noticeable "double" border. A kind of analogue border-collapse: collapse; at the tables.

  • Please edit your question by adding a sample code in which there is a specified problem so that users can give a concise answer. Otherwise, the question may be closed by the reviewers. To edit a question, click on the Edit button. You can also read tips on how to ask a good question . - Yuri

3 answers 3

 .cell { width: 25px; height: 25px; border: 3px solid black; } .cell + .cell {margin: -3px 0;} 
 <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div>

  • Why such a tricky selector? .cell + .cell will be faster. - Sasha Omelchenko
  • @SashaOmelchenko, what does it mean faster?) I didn't think about + , but it's too late - Yuri
  • As far as I know, the selector * is one of the slowest, I’m talking about it) although my data may already be outdated and in the most modern browsers this is much better. - Sasha Omelchenko
  • Here's a test google, but there's no + benfrain.com/selector-test/13.html - Sasha Omelchenko
  • one
    @SashaOmelchenko, thank you for editing :) I made it back - Yuri

You can play with the margin . For example:

 #a { width: 40px; height: 40px; border: 2px solid; margin: -2px 0 -2px 0px; } #b { width: 40px; height: 40px; border: 2px solid; } 
 <div id="a"> </div> <div id="b"> </div> 

     div { border: 1px solid black; height: 2em; } div:not(:first-child) { border-top: none; } 
     <div></div> <div></div> <div></div> <div></div> <div></div>