html - padding-top&bottom 在我的 css 中来自哪里？

Question

我有一个简单的 3 列布局的代码 ( http://jsfiddle.net/7aC3U/ )

html

<div class="wrapper">
  <div class="col col-1-3">
    <div class="module">
      <p>Col 1</p></div>
  </div>
  <div class="col col-1-3">
    <div class="module">
      <p>Col 2</p></div>
  </div>
  <div class="col col-1-3">
    <div class="module">
      <p>Col 3</p></div>
  </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.wrapper {
  background: red;
  margin: 0 auto;
  width: 90%;
  overflow: hidden;
  padding-left: 20px; }
.col {
  float: left;
  padding-right: 20px; }
.col-1-3 {
  width: 33.33%; }
.module {
  background: white; }

wrapper-div(红色)以某种方式具有填充顶部和底部，我似乎无法弄清楚这是从哪里来的。有人可以帮助我吗？

Answer 1

每个浏览器都以不同的方式读取 html 和 css 代码。他们对代码进行了自己的小改动。为避免这种情况，您可以在代码前使用 css 重置。

但是您可以通过以下方式轻松解决此问题:在您的情况下，它是 <p> 的自动 margin 元素。随便写

p{
margin:0;
}

在代码下面就够了