html - div 幅 100% をマージン付きで表示する

Question

余白のある展開可能なdiv( )を表示したい...width: 100%

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}

<div id="page">
  <div id="margin">
    "some content here"
  </div>
</div>

Answer 1

calc()css機能が使えます（ブラウザ対応）。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -o-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}​

または、マージンの代わりにパディングを使用してみてくださいbox-sizing: border-box(ブラウザのサポート):

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

Answer 2

反対のことをして、代わりに親divにパディングを与える方が良い場合もあります:

ライブデモ

私がしたことは、CSSを次のように変更することでし#pageた:

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

次に、marginから削除します#margin

注: これにより、上部と下部に 3% (高さが 6%) 追加され、300px よりも少し高くなります。つまり、正確に 300px が必要な場合は、次のようpadding:10px 3%;にして を変更しheight:280px;て、再度 300px まで追加することができます。 .

Answer 3

次のCSSを使用して、目的の結果を得ることができます。

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}