ブロック要素のマージンについて考える 『:first-child{margin-top:0}』 | デジタリアン 4 So-net
<p>などのブロック要素のマージンの付け方ってどれが正しいんだろう？なんて考えてもう何週間も経っている気がします。もしかしたら何ヶ月かもしれません。「そんなの下方向だけでいいじゃん！」「あれ？でもテーブルの中だとマージンが余分だよ？」なんてこともあったり。一番スマートなブロック要素のマージンってどんな設定なんでしょうね？ ブラウザのユーザーエージェントスタイルシートを見習う Google ChromeやFirefoxなどのユーザーエージェントスタイルシートでは上下にマージンが入るようになっています（正確にはmargin-beforeとmargin-after）。 これはマージンの相殺が発生するので<p>の後に再び<p>が置かれても二つの間の距離は2emではなく1emとなります。 p { margin: 1em 0 } マージンの相殺とは？ マージンの相殺とは以下のような状態のことをいいます
サブセクションにあるh1要素のフォントサイズ
全然知らなかったのですが、Chrome 15やFirefox 8ではベンダー拡張プリフィックス付きの:any擬似クラスを使ってサブセクションのh1要素のフォントサイズを調節するようになっているようです。Internet Explorer 9も見た感じそうなっているようですが、UAスタイルシートによるものなのかよくわかりません……。なんか変なことやってそう(偏見)。 Chrome 15の場合は、 h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } :-webkit-any(article,aside,nav,s
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
