共通要素のデフォルトのマージンとパディング値に関する議論

共通要素のデフォルトのマージンとパディング値に関する議論

今日は、さまざまなブラウザでのデフォルト要素のマージン値が何であるかという問題について説明しました。


コードをコピー
コードは次のとおりです。

// 本体のマージン値
Firefox 20.0 ----------------------- body の余白は次のとおりです: margin:8px 8px 8px 8px;
Internet Explorer 6.0 ----------- 本文の余白は次のとおりです: margin:15px 10px 15px 10px;
Internet Explorer 7.0 ----------- 本文の余白は次のとおりです: margin:16px 11px 16px 11px;
Internet Explorer 8.0-10.0 ---- 本文の余白は次のとおりです: margin:16px 8px 16px 8px;
Opera 12.11 --------------------- 本文の余白は次のとおりです: margin:16px 8px 16px 8px;
Safari 5.1 ------------------------- 本文の余白は次のとおりです: margin:16px 8px 16px 8px;
Google Chrome 27.0 --------- body の余白は次のとおりです: margin:16px 8px 16px 8px;

// h1 のマージン値
Firefox 20.0 ----------------------- h1 の余白は次のとおりです: margin:21px 0 22px 0;
Internet Explorer 6.0 ----------- h1 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h1 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h1 のマージンは次のとおりです: margin:20px 0 20px 0;
Opera 12.11 --------------------- h1 の余白は次のとおりです: margin:21px 0 21px 0;
Safari 5.1 ------------------------- h1 の余白は次のとおりです: margin:21px 0 21px 0;
Google Chrome 27.0 --------- h1 のマージンは次のとおりです: margin:21px 0 22px 0;

// h2 のマージン値
Firefox 20.0 ----------------------- h2 の余白は次のとおりです: margin:20px 0 20px 0;
Internet Explorer 6.0 ----------- h2 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h2 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h2 のマージンは次のとおりです: margin:20px 0 20px 0;
Opera 12.11 --------------------- h2 の余白は次のとおりです: margin:19px 0 19px 0;
Safari 5.1 ------------------------- h2 の余白は次のとおりです: margin:19px 0 19px 0;
Google Chrome 27.0 --------- h2 のマージンは次のとおりです: margin:20px 0 20px 0;

// h3 のマージン値
Firefox 20.0 ----------------------- h3 の余白は次のとおりです: margin:19px 0 18px 0;
Internet Explorer 6.0 ----------- h3 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h3 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h3 のマージンは次のとおりです: margin:19px 0 18px 0;
Opera 12.11 --------------------- h3 の余白は次のとおりです: margin:18px 0 18px 0;
Safari 5.1 ------------------------- h3 の余白は次のとおりです: margin:18px 0 18px ;
Google Chrome 27.0 --------- h3 のマージンは次のとおりです: margin:19px 0 18px 0;

// h4 のマージン値
Firefox 20.0 ----------------------- h4 の余白は次のとおりです: margin:22px 0 21px 0;
Internet Explorer 6.0 ----------- h4 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h4 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h4 のマージンは次のとおりです: margin:22px 0 21px 0;
Opera 12.11 --------------------- h4 の余白は次のとおりです: margin:16px 0 16px 0;
Safari 5.1 ------------------------- h4 の余白は次のとおりです: margin:21px 0 21px 0;
Google Chrome 27.0 --------- h4 のマージンは次のとおりです: margin:22px 0 21px 0;

// h5 のマージン値
Firefox 20.0 ----------------------- h5 の余白は次のとおりです: margin:22px 0 22px 0;
Internet Explorer 6.0 ----------- h5 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h5 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h5 マージンは次のとおりです: margin:22px 0 22px 0;
Opera 12.11 --------------------- h5 の余白は次のとおりです: margin:22px 0 22px 0;
Safari 5.1 ------------------------- h5 のマージンは次のとおりです: margin:22px 0 22px 0;
Google Chrome 27.0 --------- h5 のマージンは次のとおりです: margin:22px 0 22px 0;

// h6 のマージン値
Firefox 20.0 ----------------------- h6 のマージンは次のとおりです: margin:25px 0 25px 0;
Internet Explorer 6.0 ----------- h6 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- h6 の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- h6 マージンは次のとおりです: margin:25px 0 25px 0;
Opera 12.11 --------------------- h6 の余白は次のとおりです: margin:24px 0 24px 0;
Safari 5.1 ------------------------- h6 の余白は次のとおりです: margin:24px 0 24px 0;
Google Chrome 27.0 --------- h6 の余白は次のとおりです: margin:28px 0 28px 0;

// dl のマージン値
Firefox 20.0 ----------------------- dl のマージンは次のとおりです: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- dl のマージンは次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- dl のマージンは次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- dl のマージンは次のとおりです: margin:16px 0 16px 0;
Opera 12.11 --------------------- dl のマージンは次のとおりです: margin:16px 0 16px 0;
Safari 5.1 ------------------------- dl のマージンは次のとおりです: margin:16px 0 16px 0;
Google Chrome 27.0 --------- dl のマージンは次のとおりです: margin:16px 0 16px 0;

// dd のマージン値
firefox 20.0 ----------------------- dd の余白は次のとおりです: margin:0 0 0 40px;
Internet Explorer 6.0 ----------- dd のマージンは次のとおりです: margin:0 0 0 40px;
Internet Explorer 7.0 ----------- dd のマージンは次のとおりです: margin:0 0 0 40px;
Internet Explorer 8.0-10.0 ---- dd のマージンは次のとおりです: margin:0 0 0 40px;
Opera 12.11 --------------------- dd のマージンは次のとおりです: margin:0 0 0 40px;
Safari 5.1 ------------------------- dd のマージンは次のとおりです: margin:0 0 0 40px;
Google Chrome 27.0 --------- dd のマージンは次のとおりです: margin:0 0 0 40px;

// ulのマージン値
firefox 20.0 ----------------------- ul のマージンは次のとおりです: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- ul のマージンは次のとおりです: margin:19px 0 19px 40px;
Internet Explorer 7.0 ----------- ul のマージンは次のとおりです: margin:19px 0 19px 40px;
Internet Explorer 8.0-10.0 ---- ul のマージンは次のとおりです: margin:16px 0 16px 0;
Opera 12.11 --------------------- ul のマージンは次のとおりです: margin:16px 0 16px 0;
Safari 5.1 ------------------------- ul のマージンは次のとおりです: margin:16px 0 16px 0;
Google Chrome 27.0 --------- ul のマージンは次のとおりです: margin:16px 0 16px 0;

//olのマージン値
Firefox 20.0 ----------------------- ol の余白は次のとおりです: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- ol のマージンは次のとおりです: margin:19px 0 19px 40px;
Internet Explorer 7.0 ----------- ol のマージンは次のとおりです: margin:19px 0 19px 40px;
Internet Explorer 8.0-10.0 ---- ol のマージンは次のとおりです: margin:16px 0 16px 0;
Opera 12.11 --------------------- ol のマージンは次のとおりです: margin:16px 0 16px 0;
Safari 5.1 ------------------------- ol のマージンは次のとおりです: margin:16px 0 16px 0;
Google Chrome 27.0 --------- ol のマージンは次のとおりです: margin:16px 0 16px 0;

// ulのパディング値
firefox 20.0 ----------------------- ul のパディングは次のとおりです: padding:0 0 0 40px;
Internet Explorer 6.0 ----------- ul の padding は次のとおりです: padding:0 0 0 0;
Internet Explorer 7.0 ----------- ul の padding は次のとおりです: padding:0 0 0 0;
Internet Explorer 8.0-10.0 ---- ul のパディングは次のとおりです: padding:0 0 0 40px;
Opera 12.11 --------------------- ul のパディングは次のとおりです: padding:0 0 0 40px;
Safari 5.1 ------------------------- ul の padding は次のとおりです: padding:0 0 0 40px;
Google Chrome 27.0 --------- ul のパディングは次のとおりです: padding:0 0 0 40px;

// ol のパディング値
Firefox 20.0 ----------------------- ol の padding は次のとおりです: padding:0 0 0 40px;
Internet Explorer 6.0 ----------- ol の padding は次のとおりです: padding:0 0 0 0;
Internet Explorer 7.0 ----------- ol の padding は次のとおりです: padding:0 0 0 0;
Internet Explorer 8.0-10.0 ---- ol のパディングは次のとおりです: padding:0 0 0 40px;
Opera 12.11 --------------------- ol のパディングは次のとおりです: padding:0 0 0 40px;
Safari 5.1 ------------------------- ol のパディングは次のとおりです: padding:0 0 0 40px;
Google Chrome 27.0 --------- ol のパディングは次のとおりです: padding:0 0 0 40px;

// p のマージン値
Firefox 20.0 ----------------------- p の余白は次のとおりです: margin:16px 0 16px 0;
Internet Explorer 6.0 ----------- p の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- p の余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- p の余白は次のとおりです: margin:16px 0 16px 0;
Opera 12.11 --------------------- p の余白は次のとおりです: margin:16px 0 16px 0;
Safari 5.1 ------------------------- p の余白は次のとおりです: margin:16px 0 16px 0;
Google Chrome 27.0 --------- p の余白は次のとおりです: margin:16px 0 16px 0;

//thead、tbody、tfootのマージン値
firefox 20.0 ----------------------- thead、tbody、tfoot の余白は次のとおりです: margin:2px 2px 2px 2px;
Internet Explorer 6.0 ----------- thead、tbody、tfoot の余白は次のとおりです: margin: 2px 2px 2px 2px;
Internet Explorer 7.0 ----------- thead、tbody、tfoot の余白は次のとおりです: margin: 2px 2px 2px 2px;
Internet Explorer 8.0-10.0 ---- thead、tbody、tfoot の余白は次のとおりです: margin: 2px 2px 2px 2px;
Opera 12.11 --------------------- thead、tbody、tfoot の余白は次のとおりです: margin:2px 2px 2px 2px;
Safari 5.1 ------------------------- thead、tbody、tfoot の余白は次のとおりです: margin: 2px 2px 2px 2px;
Google Chrome 27.0 --------- thead、tbody、tfoot の余白は次のとおりです: margin: 2px 2px 2px 2px;

// フォームの余白値
firefox 20.0 ----------------------- フォームの余白は次のとおりです: margin:0 0 0 0;
Internet Explorer 6.0 ----------- フォームの余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 7.0 ----------- フォームの余白は次のとおりです: margin:19px 0 19px 0;
Internet Explorer 8.0-10.0 ---- フォームの余白は次のとおりです: margin:0 0 0 0;
Opera 12.11 --------------------- フォームの余白は次のとおりです: margin:0 0 0 0;
Safari 5.1 ------------------------- フォームの余白は次のとおりです: margin:0 0 0 0;
Google Chrome 27.0 --------- フォームの余白は: margin:0 0 0 0;

<<:  MySQL関数の簡単な紹介

>>:  HTMLとXHTML、HTML4とHTML5のタグの違いについて簡単に紹介します。

推薦する

CentOS 7 に PHP5 用の suPHP をインストールする方法 (Peng Ge)

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

1 つの記事で React における Redux の初期の使用を理解する

Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...

【HTML要素】タグテキストの詳細説明

1. 基本的なテキスト要素を使用してコンテンツをマークアップするまず表示効果を見てみましょう:対応す...

テーブルの動的な色の変更を実現するJavaScript

この記事では、テーブルの動的な色の変更を実現するためのJavaScriptの具体的なコードを参考まで...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

Ubuntuで顔認識ログインを実装するための完全な手順

1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...

CSS のグリッドプロパティの使用に関する詳細な説明

グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...

MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...

Docker のポート解放失敗の解決策

今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

MySQL のフィールドに一意のインデックスを追加および削除する方法

1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...

JavaScriptの詳細な分析と方向の変更方法

目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...

Linux (Ubuntu) での MySQL 5.7.17 のインストールと設定のチュートリアル

序文以前、MySQL 5.6 をインストールしました。3 か月後、開発者から MySQL で JSO...