如何隐藏身体后面的边界？

Question

正如您从图片中看到的那样，白色border悬挂在绿色body上方。

我希望白色border隐藏在绿色background后面，以便面板在左/右侧触及列的边缘，没有空格。

代码

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从margin中移除额外的.home-panels，它是CSS中的元素body而不是类.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添加到通配符选择器*，因此它将应用于每个选择器。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;