Question

的代码

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

你可以使用

* {padding:0;margin:0}

它将所有标签中的所有填充和边距重置为0，请不要使用盒子大小，根据我不好的做法

Answer 2

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

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

p{
margin:0;
}

在代码下方，这就足够了

填充顶部和底部在我的CSS中来自哪里？

2 个答案: