如何隱藏身體後面的邊框？

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

移除.home-panels額外margin，這是件body不是階級.body在CSS。

，你需要添加

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

請注意，我說box-sizing:border-box到通配符選擇*所以它適用於所有的選擇。

*, 
 
*: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>