CSS基礎学習15：ボックスモデルの補足マージン merge_html/css

CSS基礎学習15：ボックスモデルの補足マージン merge_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:08

オリジナル

1280 人が閲覧しました

今日は引き続き、CSS ボックスモデルの補足、CSS の基礎学習 13: ボックスモデル、および CSS の基礎学習 14: ボックスモデルの補足の表示属性

プロパティ設定のすべてで、ボックスモデルのコンテンツの概要を紹介します。今日のトピック、マージンの結合を始めましょう。

マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。結合されたマージンの高さは、結合された 2 つのマージンの高さの大きい方に等しくなります。

。ただし、実際に Web ページをレイアウトする場合、多くの混乱を引き起こす可能性があります。簡単に言えば、マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。

要素が別の要素の上に表示される場合、最初の要素の下マージンと 2 番目の要素の上マージンがマージされます。下の図を見てください:

上の図を見ても直感的ではない場合は、例を挙げてみましょう:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS盒子模型外边距合并</title><style type="text/css">* {/*去掉所有的缺省设置*/  margin:0;  padding:0;  border:0;}#div_1 {  width:100px;  height:100px;  margin-top:20px;/*第一个盒子的上外边距为20像素*/  margin-bottom:20px;/*第一个盒子的下外边距为20像素*/  background-color:#FF0000;}#div_2 {  width:100px;  height:100px;  margin-top:10px;/*第二个盒子的上外边距为10像素*/  background-color:#0000FF;}</style></head><body><div id="div_1"></div><div id="div_2"></div><p>请注意，两个div之间的外边距是20px，而不是30px(20px+10px)</p></body></html>

ログイン後にコピー

操作の結果は次のとおりです:

支払い2 つのボックス間の距離に注意してください。これはいわゆるマージンでもあり、実際にマージが行われ、マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。

ある要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンや下マージンも

マージされます。以下の図を参照してください:

: 引き続きインスタンスに来て、外側の距離の結合の結果を確認します:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS盒子模型外边距合并2</title><style type="text/css">* {  margin:0;  padding:0;  border:0;}#outer {  width:300px;  height:300px;  background-color:#FF0000;  margin-top:20px;/*外部盒子的上外边距为20像素*/}#inner {  width:100px;  height:100px;  background-color:#0000FF;  margin-top:10px;/*内部盒子的上外边距为20像素*/}</style></head><body><div id="outer">    <div id="inner"></div></div><p><b>注释：</b>请注意，如果不设置div的内边距和边框，那么内部div的上外边距将与外部div的上外边距(合叠)</p></body></html>

ログイン後にコピー

の実行結果は次のとおりです:

2 つのボックスの値の上端と外側の境界線の距離のピクセルに注目してください。これらはすべて 20 ピクセルであることがはっきりとわかります。少し奇妙に見えますが、マージンはマージン自体とマージすることもできます

。

余白はあるが境界線やパディングがない空の要素があるとします。この場合、上のマージンと下のマージンが一緒になり、マージされます。

この例を示すのは簡単ではありませんが、次の例のマージに注目してください。ボックスの 2 つの余白のうち。

を通じてを使用してthrough out through through out through out through through through through through through through through over through through through through through の to ‐ to ‐‐‐‐

これはシリーズです段落要素がかかる理由スペースが非常に少ないのは、すべてのマージンがマージされて小さなマージンが形成されているためです。

マージンの結合は最初は少し奇妙に思えるかもしれませんが、実際には意味があります。たとえば、いくつかの段落で構成される典型的なテキストページを考えてみましょう。最初の

段落の上のスペースは、段落の上マージンと同じです。マージンを結合しない場合、後続のすべての段落間のマージンは、隣接する上部マージンと下部

マージンの合計になります。これは、段落間のスペースがページの上部の 2 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。：释

注: 通常のファイルフローの中央ブロックフレームの垂直方向の外側の距離のみが発生します。インラインボックス、フローティングボックス、または絶対配置ボックス間のマージンはマージされません。