css?reset とデフォルトの margin?padding を持つ要素はどれか value_html/css_WEB-ITnose

多くの Web サイトでは、CSS をリセットするときに次の処理を実行します:

body、ul、ol、li、p、h1、h2、h3、h4、h5、h6、form、label、dl、dt、dd、fieldset , img {

1. margin: 0;
2. padding: 0;
3. border: 0;
4. list-style: none;

}

いくつか疑問がある場合は、上記のことを実行してくださいリストされているタグにはデフォルトのマージンとパディングの値がありますか? 状況に関係なく、マージン:0 とパディング:0 のみを使用しますか?

今日は body p ul ol dl dd タグで実験を行います:

最初は HTML コードです:

CSS リセットはせず、ul,ol,dl{ を追加するだけです。

Chrome でのパフォーマンスは次のようになります:

したがって、次のような要約になります:

1. 本文の水平方向と垂直方向のマージン値はデフォルトで 10 ピクセルです。

2. p、ul、ol、dl タグのマージン値は 20 ピクセルです。デフォルトでは垂直方向であり、ラベル間の 20 ピクセルの間隔は繰り返されません。

3. dd ラベルの水平方向のマージン値はデフォルトで 40 ピクセルです。

4. ul,ol ラベルにはパディング値があります。デフォルトでは水平方向に 40px です (ie6/7 ではなし)。

以下のスタイルを追加した後の Firefox でのパフォーマンス:

body,p,ul,ol,dl,dd{ margin:0 }

ul,ol{padding:0;上記は Chrome と Safari で同じように動作します。

list-style-position:inside

が ul,ol に追加される理由は、次の発見によるものです:

1. ul,ol が padding:0 を設定した後、箇条書き (ドットまたはli シリアル番号のドット) が消えた場合は、 list-style-position:inside

を追加して箇条書きを復元します。

2. ul,ol タグに幅を追加すると、下に箇条書き (ドットまたはシリアル番号) が表示されなくなります。 ie6/7、list-style-position:inside

回復可能な箇条書きを追加します。

ie7 でのパフォーマンスは次のとおりです:

上記のパフォーマンスは ie6 でも同じであるため、上記の図は繰り返されません。

list-style-position:inside を ul,ol に追加した後の、ie6 でのパフォーマンスは次のようになります。

上記のパフォーマンスは、ie7 でも同じです。

要約すると、CSS リセットは次のようになります:

body, h1, ...,p, ul, ol, dl, dd{ margin:0; }

ul,ol{ padding:0; }