CSS填充不能正常工作？

Question

我认为我有填充问题。 我做了一个只有padding: 20px;的简单盒子，对我而言，填充底部看起来像是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 {}框大小设置为边框，行高为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/

Answer 2

您可以在某处获得保证金。您可以通过使用互联网浏览器检查元素来检查这一点（右键单击）。

或者您可以尝试浮动.panel-default并给它一个显示块，如下所示：

.panel-default {
  float: left;
  display: block;
}

如果这不起作用，它肯定是某个地方的边缘 - ）

Answer 3

也许您没有从段落标记中删除默认边距，这会添加到底部。

尝试将段落边距设置为0。