Twenty Twelveで上下の余白を無くすCSS設定

Twenty Twelveテーマサイトを（サイトを見る媒体により表示に使用されるCSSが違うようですが）パソコンで見るとサイトの上下に余白ができます。

この余白を無くすには、style.cssの「@media screen and (min-width: 960px) 」にある「body .site」に設定されていマージンの値を以下のように変更します。

margin-top:0px;
margin-bottom:0px;

下の例は、子テーマでstyle.cssを上書きする場合です。

body .site {
　　padding: 0 40px;
　　padding: 0 2.857142857rem;
　　margin-top: 0px;
　　margin-top: 0rem;
　　margin-bottom: 0px;
　　margin-bottom: 0rem;
　　box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

IE8対策

「@media screen and (min-width: 960px) 」にある「body .site」の値を変更してもIE8では、Firefoxなどと同じように表示されません。

IEブラウザに対応するためには、Twenty Twelve下のCSSフォルダにあるie.cssファイルを編集（追加）します。または、style.cssに追加します。

style.cssに追加する場合、「@media screen and (min-width: 960px) {}」の外に以下のスタイルを追加します。

.ie8 body .site {
  margin-top: 0px;
  margin-bottom: 0px;
}

ie.cssでは、「.site」のmarginを0に変更すると上の余白が無くすことが出来ます。

margin: 0px auto;

.site {
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  margin: 0px auto;
  max-width: 960px;
  overflow: hidden;
  padding: 0 40px;
}