html - 在宽度百分比中包含填充/边距？

如何在计算中包含width:50%和panel-default，但在计算中包括padding或margin（不确定哪一个更合适），以便panel-default完全填充宽度的100％？



码

.testing-here {
  padding: 2.5px;
  display: inline;
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  /* = width for a 1:1 aspect ratio */
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0px;
  display: inline-block;
}
.panel-body {
  color: white;
  position: absolute;
}

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

更新：

现在，如果我将width设置为50%，则所有面板垂直下拉，因为它们不能并排放置。

最佳答案

你需要 ：


将box-sizing:border-box添加到*,*:before,*:after
修复inline-block间隙，可以通过重置父字体font-size:0来实现
从display:inline删除.testing-here
将border添加到.panel-default

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  padding: 2.5px;
  font-size: 0
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  /* = width for a 1:1 aspect ratio */
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0;
  display: inline-block;
  font-size: 16px;
  border: 5px white solid
}
.panel-body {
  color: white;
  position: absolute;
}

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

关于html - 在宽度百分比中包含填充/边距？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37283147/