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

Question

如何使用 panel-default 设置 width:50%，但包括 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%，所有面板都会垂直下拉，因为它们无法并排放置。

Answer 1

你需要:

• 将 box-sizing:border-box 添加到 *,*:before,*:after
• 修复 inline-block 间隙，你可以通过重置父字体来实现，font-size:0
• 从 .testing-here 中删除 display:inline
• 将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>