ホームページ > 記事 > ウェブフロントエンド > Margin_html/css_WEB-ITnose
Margin_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:41935ブラウズ
Margin とは
CSS の margin プロパティは、要素の周囲のスペースを定義します。上、右、下、左のマージンは、個別のプロパティを使用して設定できます。短縮マージン プロパティを使用して、すべてのマージンを一度に変更することもできます。 ??W3School
境界線、要素の周囲に余分な空白を生成します。 「空白」とは通常、他の要素が表示されず、親要素の背景が表示される領域を指します。 ??CSS 権威ガイド
私はマージンを説明するのに「外側マージン」という言葉を使うことを好みます (同様に、パディングを「内側マージン」と呼ぶこともできますが、私は単にパディングを「塗りつぶし」または「空白」と呼びたいだけです) ）、マージンの最も基本的な使用法は、視覚的な観点から相互の分離を実現するために要素の周囲のスペースの間隔を制御することであることが明確に理解できます。
マージンの特徴
マージンは常に透明です。
margin 個別の属性を使用することで、上、右、下、左のマージンを設定できます。つまり、マージン上、マージン右、マージン下、マージン左です。
マージンのマージン幅の値のタイプは次のとおりです: auto | length |percentage
省略された margin 属性を使用して、すべてのマージンを同時に変更することもできます: margin: top rightbottom left;(例: margin:10px) 20px 30px 40px） 記憶方法は要素の真上から時計回りに「上、右、下、左」です。また、仕様では省略された数値の記述方法も規定されており、基本的には次のとおりです:
1. margin の値が 1 つだけの場合、上、右、下、左のマージンが同じ値であることを意味します。例: margin:10px; は margin:10px 10px 10px 10px; と同じです。
2. margin に値が 2 つしかない場合、最初の値は上マージン値と下マージン値を表し、2 番目の値は左マージン値と右マージン値を表します。 。例: margin:10px 20px; は margin:10px 20px 10px 20px; と同等です。
3. margin に 3 つの値がある場合、最初の値は上のマージンの値を表し、2 番目の値は左右のマージンの値を表します。 3 番目の値 この値はマージンの値を表します。例: margin:10px 20px 30px; は margin:10px 20px 30px 20px; と同等です。
4. margin に 4 つの値がある場合、これらの 4 つの値は、上、右、下、およびの 4 つのマージン値に対応します。それぞれ左に。例: margin: 10px 20px 30px 40px;個人的には、3 つの値を持つマージンを使用することはお勧めしません。第一に、覚えやすく、第二に、将来変更するのが簡単ではありません。 write margin: 10px 20px 30px; 後、要件は上 10px、右 30px、下 30px、左 20px に変更されます。面倒で不愉快なので、最初から 10px と正直に書いた方が良いです。今 2 バイトを節約するためだけに、将来の再開発コストが増加するのは避けてください。
垂直マージンのマージ問題
上記の用語に怯える必要はありません。簡単に言えば、マージンのマージとは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。この基本を学ぶには、W3Shool CSS Margin Merging をチェックしてください。
実際の作業では、垂直マージンのマージの問題は、最初の子要素のマージントップが親要素とその親要素の隣接要素の間の距離を押し上げるという点で一般的であり、標準ブラウザでのみ機能します。 (FirfFox、Chrome、Opera、Sarfi) では問題が発生しますが、IE では良好に動作します。たとえば、次のコードを表示できます (IE ではパフォーマンスは「正常」ですが、標準ブラウザで表示すると「バグ」が表示されます):<html xmlns="http://www.w3.org/1999/xhtml"><head><title>垂直外边距合并</title><style>.top{width:160px; height:50px; background:#ccf;}.middle{width:160px; background:#cfc;}.middle .firstChild{margin-top:20px;}</style></head><body><div class="top"></div><div class="middle"> <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div> <div class="secondChild"></div></div></body></html> CSS 仕様に従っている場合、IE の「良好なパフォーマンス」は実際にはIE には Layout レンダリングがあるため、間違ったパフォーマンスが発生し、この「行儀の良い」外観が得られます。他の標準ブラウザでは、「バグのある」外観が表示されます。 W3Shcool の CSS マージンのマージに関する上記の記事を読んでいれば、この問題について議論するのは簡単でしょう。この問題の理由は、仕様によれば、ボックスにpadding-topとborder-topがない場合、ボックスの上マージンが内部ドキュメントフローの最初の子要素と同じになるためです。重なります。
ホワイトポイントは、親要素の最初の子要素のトップマージントップが有効な境界線またはパディングに遭遇できない場合、レイヤーごとに独自の「リーダー」（親要素、祖先）を見つけ続けます。要素）トラブル。リーダーに有効なボーダーまたはパディングを設定している限り、リーダーなしでこのマージンを効果的に制御して、レベルを飛び越えたり、勅令を装って自分のマージンをリーダーのマージンとして実行したりするのを防ぐことができます。 垂直マージンのマージの解決策は、親要素の例の中央の要素に border-top または padding-top を追加することで、この問題を解決できると上で説明しました。
一般的に、この問題についてここで説明する場合、ほとんどの記事では詳しく説明されませんが、実際の開発者として私が最も知りたいのは、何が起こっているのか、そしてなぜそうなのかを知りたいということです。 margin-top を使用する本来の目的は、親と一致することです。要素の距離を分離し、解決策によれば、これは実際には「修正」であり、親子の垂直マージンをマージするという CSS 仕様の「バグ」を「補って修正」するために、border-top と の使用を強制します。親要素のpadding-は不快で覚えにくいです。また、ページデザインのドラフトでborder-topに上部のボーダーを追加する必要がない場合は、このガイドラインを忘れることになります。 、そのような追加は不必要であり、変更は潜在的な危険を残します。
そのようないわゆる標準仕様のために、なぜ border-top と padding-top を使用して余分なコード行を記述する必要があるのでしょうか? Margin と Padding のどちらを使用するかに関する別の記事を参照すると、答えが見つかります。
マージンまたはパディングを使用すべきか
マージンを使用する必要がある場合:
境界線の外側にスペースを追加する必要がある場合。
空白スペースに背景（色）が必要ない場合。
上下に接続された 2 つのボックス間のスペースは互いにオフセットする必要があります。たとえば、マージンが 15px + 20px の場合、マージンは 20px になります。
パディングを使用する必要がある場合:
内部テスト中に境界線にスペースを追加する必要がある場合。
空白スペースに背景（色）が必要な場合。
上下に接続された 2 つのボックス間のスペースは、2 つのボックスの合計に等しいことが期待されます。たとえば、15 ピクセル + 20 ピクセルのパディングでは、35 ピクセルの空白スペースが生じます。
個人的な考え: margin は要素間の距離を区切るために使用され、padding は要素とコンテンツ間の距離を区切るために使用されます。マージンは、要素が互いに独立できるように要素を区切るためのレイアウトに使用され、パディングは要素とコンテンツの間のスペースに使用され、コンテンツ (テキスト) 要素と (ラップされた) 要素の間に「呼吸距離」を確保します。
ここでは、別の記事の内容の一部を抜粋しています。詳しくは、Margin と Padding のどちらを使用するかを参照してください
ブロック要素とインライン要素のマージンの違い
HTML (これは HTML 標準です。 xhtml) の代わりに、ブロックとインラインという 2 つの基本要素があります。ブロック要素はその名のとおり「ブロック」で表現される要素（ブロック状の要素）、インライン要素は「線」で表現される要素（文字レベルの要素や文字列）です。 2 つのパフォーマンスの主な違いは、ページ ドキュメントではブロック要素が新しい行で始まり、独自の行を占有することです。インライン要素は、他のインライン要素と同じ行に配置されます。
ブロック要素 (ブロック要素) は次のとおりです: P|H1|H2|H4|UL|OL|PRE| HTML5 標準の進歩に伴い、一部の要素は廃止され、いくつかの新しい要素が導入されます。) すべてのブロック要素が、デフォルトの表示属性が block であるわけではないことに注意してください (display:table を含む table などの要素もブロック要素です)。インライン要素には、次のものが含まれます。 | IMG | OBJECT | BR | Q | SUP | SPAN | 置換可能な要素と呼ばれます。これらの要素が一般的なインライン要素 (相対的に非置換要素) と異なるのは、これらの要素が固有の次元 (固有の次元) を持ち、幅/高さの属性を設定できることです。それらのプロパティは、display:inline-block が設定された要素と同じです。
もしかしたら、置換されない要素について少し混乱している友達もいるかもしれません。全員が理解できるように手伝ってください。 W3C では非置換要素は明確に定義されていませんが、文字通りの意味から、非置換要素は置換された要素 (置換された要素) に対応する、つまり置換された要素の意味を理解すれば理解できます。非置換要素。置換要素の定義は、W3C で次のように指定されています。
「画像、埋め込みドキュメント、アプレットなど、CSS フォーマッタの範囲外にある要素」
定義から、置換された要素 (置換要素）は主に、デフォルトで CSS 形式の表示範囲を持つ img、input、textarea、select、object などの要素を指します。また、非置換要素とは、img、input、textarea、select、objectなどの置換要素以外の要素であることが分かります。
Margin のパフォーマンスはブロックレベルの要素に完全に反映され、上下左右に設定できます。また、ブロックレベル要素のマージンの基準ベースは前の要素、つまり、それ自体の前の要素に対するマージン距離であることに注意してください。要素が最初の要素の場合、親要素を基準としたマージン距離になります (ただし、最初の要素が親要素の margin-top を基準とし、親要素が padding-top/border-top を設定していない場合は、上記の垂直マージンのマージに関する知識を確認する必要があります)
margin は仕様で許可されているインライン要素にも使用できますが、margin-top と margin-bottom はインライン要素の高さ (行数まで) には影響しません。 ）、境界線効果（マージン効果）により透明になり、視覚的な影響はありません。
これは、境界線がインライン要素に適用された場合、要素の行の高さが変更されないためです。テキストの行間隔と同様に、インライン要素の行の高さを変更したい場合は、これら 3 つしか使用できません。属性: line-height、fong-size、vertical-align。インライン要素は行ごとに配置されるため、インライン要素の高さに影響するのは高さではなく行の高さであることに注意してください。高さを設定した場合、これはインライン要素全体の高さになります。それともインライン要素は 1 行の高さですか?これを言うのは不可能なので、各行の高さを設定します。これは line-height のみです。
margin-top/margin-bottom はインライン要素に対してあまり実質的な影響を与えませんが、margin-left/margin-right は依然としてインライン要素に影響を与える可能性があります。マージンを適用: 10px 20px 30px 40px;、左側のCSSがインライン要素に書かれている場合、その効果はおおよそ上下に影響がなく、左側の隣接する要素またはテキストとの距離が40px、そして右側の隣接する要素またはテキストからの距離は 20 ピクセルです。自分で試してみることもできます。
最後に、インライン要素の中には、上で説明した非置換要素があります。これらの要素 img|input|select|textarea|button|label はインライン要素ですが、そのマージンは依然として上下左右に影響を与える可能性があります。そしてそうです！
要約すると、margin 属性は、表表示タイプの要素 (table-caption、table、inline-table を除く) を除くほぼすべての要素に適用でき、垂直マージンは置換されていないインライン要素 (非インライン要素で置き換えられます) は機能しません。
ネガティブマージンテクノロジーとその応用
マージンの実践的な応用の中でも、ネガティブマージンテクノロジーは私にとって CSS を学ぶための最も重要な教訓の 1 つであり、ページ上の多くの高度なアプリケーションと困難な問題は CSS を使用して解決できます。マイナスマージンテクノロジーが実装されています。マージンテクノロジーはとても便利ですが、紙面の都合上、急いで説明したくなかったので、マージンテクノロジーに特化した記事を作成して、その効果、原理、応用について詳しく説明することにしました。その前に、まずマージン属性について簡単なものからより深いものまで説明している Yi Fei によるこの記事を読んで「マージン基準線」の概念を一般的に理解してから、ネガティブについてのこの記事をチェックしてください。マージンテクノロジーとその応用。
ブラウザの一般的なマージンのバグ
ここまで書きましたが、最後に、今後マージンでレイアウトの問題が発生した場合は、ここで解決策を見つけることができます。ブラウザのマージンに関するその他のバグについては、メッセージを残してください。検証と採用後に追加します。共有していただきありがとうございます:
IE6 のダブルマージンのバグ:
発生: 親要素に内部番号を与える場合。浮動要素が margin-left (要素 float:left) または margin-right (要素 float:right) に設定されている場合、マージンは 2 倍になります。
解決策: display:inline; CSS 属性をフローティング要素に追加するか、margin-left の代わりに padding-left を使用します。
原理分析: ブロックレベルのオブジェクトのデフォルトの表示属性値はブロックです。これは、フローティングが設定され、そのマージンも設定されている場合に発生します。おそらく、「後続のオブジェクトと最初のオブジェクトの間に二重マージンのバグがないのはなぜですか?」と疑問に思うかもしれません。 float には対応するオブジェクトがあるため、この問題は親オブジェクトを基準とした float オブジェクトでのみ発生します。最初のオブジェクトは親オブジェクトを基準とし、後続のオブジェクトは最初のオブジェクトを基準とするため、後続のオブジェクトを設定しても問題はありません。なぜ display:inline がこの二重マージンのバグを解決できるのでしょうか? まず第一に、inline 要素や inline-block 要素には二重マージンの問題はありません。次に、float:left などの浮動属性により、インライン要素を haslayout にし、インライン要素を inline-block 要素と同じように動作させ、高さと幅、垂直マージンとパディングなどをサポートできるため、div クラスのすべてのスタイルがサポートされます。この表示ではインライン要素で使用できます。
IE6 の浮動要素間の 3px のギャップのバグ:
発生状況: 要素が浮動し、非浮動要素が自然にその近くに浮動するときに発生する 3px のバグ。
解決策: 右側の要素をフローティングにするか、IE6 Hack _margin-left:-3px; を右側の要素に追加して、3 ピクセルの間隔を削除します。
原理分析: IE6 ブラウザのバグ。
IE6/7 マイナスマージン非表示バグ:
発生内容: hasLayout のある親要素内の hasLayout 以外の要素にマイナスマージンを設定した場合、親要素以降の部分が表示されなくなる。
解決策: 親要素の hasLayout を削除するか、子要素に hasLayout を割り当てて、position:relative を追加します。
原理分析: IE6/7 の独自の hasLayout が問題を引き起こします。
IE6/7 での Ul/ol マークが消えるバグ:
発生状況: ul/ol が haslayout をトリガーし、margin-left が ul/ol に書き込まれると、以前のデフォルトの ul/ol マークが消えます。
解決策: ul/ol の margin-left の代わりに li に margin-left を設定します。
原理分析: IE6/7 ブラウザのバグ
IE6/7 でのマージン要素と絶対要素の間の重複バグ:
発生状況: 2 列アダプティブ レイアウトでは、左側の要素が絶対位置に配置され、右側のマージンが離れた位置に配置されます。 IE6/7では、左側に絶対属性が適用されたブロックレベル要素が右側のアダプティブテキストコンテンツと重なります。
解決策: 左側のブロックレベル要素をインライン要素に変更します (div を span に変更するなど)。
原理分析: これは、IE6/IE7 ブラウザーがインライン水平ラベル要素とブロック水平ラベル要素を区別せずに同等にレンダリングするためです。これは IE6/7 ブラウザのレンダリングのバグです。
IE6/7/8 での自動マージン中央揃えのバグ:
発生状況: ブロック要素に自動マージンを設定すると中央揃えにできません
解決策: このバグの理由は通常、Doctype がないことと、IE の quirks モードです。 Doctype 宣言を追加するだけでトリガーされます。 「IE を倒すための Sunflower ガイド」に記載されている方法は、ブロック要素に幅を追加することですが、私の個人的なテストによると、Doctype が存在しない場合、この方法で追加しても無効です。要素までの幅ではブロックを作成できません。要素は中央に配置されます。
原則分析: Doctype 宣言が欠落しています。
IE8 で margin:auto を設定すると、Input[button | submit] を中央に配置できません
状況: IE8 で、ボタンのようなラベルが指定されている場合 (button input[type="button"] input[type=" など) submit" ]) Set { display: block; margin:0 auto; } 幅が設定されていない場合、中央に配置できません。
解決策: 入力に幅を追加できます。
原理分析: IE8 ブラウザーのバグ。
IE8 パーセンテージ パディングの垂直マージンのバグ:
発生状況: 親要素にパーセンテージ パディングが設定され、子要素に垂直マージンがある場合、親要素にマージンが設定されているかのようになります。
解決策: overflow:hidden/auto を親要素に追加します。
原理分析: IE8 ブラウザのバグ