正如您从图像中看到的那样,白色 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>
最佳答案
从 .home-panels
中删除额外的 margin
并且它是元素 body
而不是 CSS 中的类 .body
.
你需要添加
.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>
关于html - 如何隐藏 body 后面的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37558122/