包括宽度百分比的填充/边距？

Question

我怎样才能width:50%与panel-default padding，但在计算中包括margin或panel-default（不确定哪一个更合适），以便{{} 1}}完全填充100％的宽度？

代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

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

Answer 1

你需要：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将box-sizing: border-box;添加到元素