Как скрыть границу за телом?

Question

Как видно из изображения, белый border висит над зеленым цветом body.

Я хочу белый border прикрываться зеленый background так, что панели коснуться края колонки как на левой/правой стороне, без пробелов.

Код

body { 
 
    background-color: green; 
 
    margin: 0; 
 
} 
 
.home-panels { 
 
    font-size: 0; 
 
    margin-left: -2.5px; 
 
    margin-right: -2.5px; 
 
    margin-top: 2.5px; 
 
    margin-bottom: 2.5px; 
 
} 
 
.panel-default { 
 
    box-sizing: border-box; 
 
    border-style: none; 
 
    position: relative; 
 
    width: 50%; 
 
    padding-bottom: 40%; 
 
    overflow: hidden; 
 
    background-color: #446CB3; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    margin-bottom: 0px; 
 
    border: 2.5px white solid; 
 
} 
 
.panel-body { 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: flex; 
 
}

<div class="home-panels"> 
 
    <a href="/inspirations/25-asdf-asdf"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">asdf asdf</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/4-to-to-to-to-to-to-to-to-to-to-to-to"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">to to to to to to to to to to to to</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/24-asd"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">asd</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/8-test"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">test</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
</div>

Answer 1

удалить дополнительный margin из .home-panels и это элемент body не класс .body в CSS.

и вам нужно добавить

, что я добавил box-sizing:border-box к шаблону селектора * так будет применяться к каждому селекторов

.home-panels a:nth-child(odd) .panel-default { 
    border-left: 0 
} 
.home-panels a:nth-child(even) .panel-default { 
    border-right: 0 
} 

Примечание.

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-color: green; 
 
    margin: 0; 
 
} 
 
.home-panels { 
 
    font-size: 0; 
 
} 
 
.panel-default { 
 
    border-style: none; 
 
    position: relative; 
 
    width: 50%; 
 
    padding-bottom: 40%; 
 
    overflow: hidden; 
 
    background-color: #446CB3; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    margin-bottom: 0px; 
 
    border: 2.5px white solid; 
 
} 
 
.home-panels a:nth-child(odd) .panel-default { 
 
    border-left: 0 
 
} 
 
.home-panels a:nth-child(even) .panel-default { 
 
    border-right: 0 
 
} 
 
.panel-body { 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: flex; 
 
}

<div class="home-panels"> 
 
    <a href="/inspirations/25-asdf-asdf"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">asdf asdf</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/4-to-to-to-to-to-to-to-to-to-to-to-to"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">to to to to to to to to to to to to</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/24-asd"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">test</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
    <a href="/inspirations/8-test"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     <div class="white-link">test</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
</div>