0

我有一个简单的 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（红色）有一个填充顶部和底部，我似乎无法弄清楚这是从哪里来的。有人可以帮助我吗？

4

2 回答 2

1

您可以使用

* {padding:0;margin:0}

它将所有标签中的所有填充和边距重置为 0，请不要在那里使用 box-sizing 根据我的说法，这不是一个好习惯

于 2013-08-04T12:00:11.850 回答
1

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

但是您可以通过这样做轻松解决这个问题：在您的情况下，它是<p>元素的自动边距。写吧

p{
margin:0;
}

在代码下方，这就足够了

于 2013-08-04T12:06:06.403 回答