全体に適応させたいプロパティのとき

css

これ長かった。昨日の晩からずっっっと悩んでたんだけどようやっと原因分かった。
現象としては、css、HTMLが以下の状態のとき、

css
  #WRAP *{
    padding: 0px;
    margin: 0px;
  }

  /* padding 成功 */
  #test1{
    padding: 100px;
    background: #ff00ff;
    margin: 0px 0px 100px 0px
  }

  /* padding 失敗 */
  .test2{
    padding: 100px;
    background: #ff00ff;
    margin: 0px 0px 100px 0px
  }
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="WRAP">
	
  <!-- paddingできる -->
  <h1 id="test1">優美な屍骸</h1>

  <!-- paddingできない -->
  <h1 class="test2">優美な屍骸</h1>
	
</div>
</body>
</html>

ってこんな感じのときにだ。コメントに書いてあるようにpaddingが効かない。困った困ったでウン時間費やしてたんだね。cssではかなり基本的な概念の詳細度が抜けていたよ。
ってかさっき知ったんだけど・・・
独学で(というか完全に趣味で)cssを作ってるからこんなの知らなかった。下に記述したものが優先されるものだと思ってました。
詳細度に関しては、ま、カスケード - CSS Dencitie を参考にさせてもらいました。


なので対策としては、全体に適応させたいプロパティはbodyで指定をする。ということかな。そうすれば詳細度もたった1ですし。
え？常識？


そういえばこんな記事もありましたね・・・・


そもそもなぜ

body * {
  margin: 0px;
  padding: 0px;
}

にするかといいますと、ブラウザによってそれらの初期値が違う場合があるんですね。Operaなんかそれ。
他にもデザインするほうとしては勝手にmarginをとられると面倒なので。って言う理由もあります。