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; }

どういうわけか、ラッパー div (赤) には上部と下部のパディングがあり、これがどこから来たのかわかりません。誰か助けてくれませんか？

4

2 に答える 2

1

あなたが使用することができます

* {padding:0;margin:0}

すべてのタグのすべてのパディングとマージンを 0 にリセットし、ボックスのサイズ変更を使用しないでください。

于 2013-08-04T12:00:11.850 に答える
1

すべてのブラウザーは、html および css コードの読み取り方が異なります。コードに独自の小さな変更を加えています。これを回避するには、コードの前に CSS リセットを使用できます。

しかし、これを行うことでこれを簡単に解決できます。あなたの場合、それは<p>要素の自動マージンです。書くだけ

p{
margin:0;
}

コードの下にあり、それで十分です

于 2013-08-04T12:06:06.403 に答える