Как избежать изменения ширины границы при перекрытии двух границ?

Question

Можно ли накладывать две границы без изменения ширины пересеченной границы? Я знаю, что могу просто сделать border-top: none; для нижнего div, но я ищу другое решение, это возможно.

спасибо.

UPDATE Я предпочитаю глобальное решение возможно на всех

Это пример:

.box{ 
 
    border: solid thin; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div>

Answer 1

Вы можете попробовать добавить отрицательный запас, вы можете настроить таргетинг div отдельно с id или чем-то, хотя (или новый класс, если вы хотите, чтобы он был более глобальным).

.box{ 
 
    border: solid thin; 
 
    margin-top: -1px; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div>

Как уже упоминалось в комментариях, вы должны использовать точек (вместо «тонкий»), особенно если у вас есть размер границы над 1px (и даже если вы этого не сделаете для хорошей практики) , потому что если вы измените размер границы, вы должны соответственно изменить отрицательный запас.

Answer 2

Я не уверен, что это представляет собой «другой способ», но вот способ сделать это без отрицательных полей.

.outer-box { 
 
    border: solid thin; 
 
} 
 
.box:not(:last-child) { 
 
    border-bottom: solid thin; 
 
}

<div class="outer-box"> 
 
    <div class="box"> 
 
    Test 
 
    </div> 
 
    <div class="box"> 
 
    Test 2 
 
    </div> 
 
</div>

Answer 3

Ну, это альтернативное решение, так как вы просили об этом.

.table { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.box { 
 
    border: solid thin; 
 
    display: table-row; 
 
}

<div class="table"> 
 
    <div class="box">Test</div> 
 
    <div class="box">Test1</div> 
 
</div>

Answer 4

Используйте + селектор будет проверять, если .box имеет следующий родственный и удалить из него border

.box { 
 
    border: solid thin; 
 
} 
 
.box + .box { 
 
    border-top: 0; 
 
}

<div class="box">Test></div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div> 
 
<div class="box">Test1</div>