CSS 填充无法正常工作？

Question

我认为填充有问题。 我制作了一个只有 padding: 20px; 的简单盒子，对我来说它看起来 padding-bottom 超过 20px。

部分截图如下:

这是我的简单 CSS:

.panel {
  width: auto;
  height: auto;
  border-radius: 2px;
  margin-bottom: 20px;
  position: relative;
}

.panel-default {
  padding: 20px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.panel-default > .panel-body {
  font-size: 14px;
}

HTML:

<div class="grid_4">
    <div class="panel panel-default">
      <div class="panel-body">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>

我使用 960 网格系统，但我不认为这是因为这个。 我在我的 html, body {} 中将 box-sizing 设置为 border-box 并将 line-height 设置为 24px。

希望有人能帮助我:)

Answer 1

填充没问题，问题出在您的margin-bottom: 20px;。

这应该是您的 .css:

.panel {
  width: auto;
  height: auto;
  border-radius: 2px;
  position: relative;
}

.panel-default {
  padding: 20px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.panel-default > .panel-body {
  font-size: 14px;
}

此代码将具有您正在寻找的效果。

https://jsfiddle.net/r67nxyL5/