div+css による Web ページレイアウトデザインの新たな始まり (5)-CSSチュートリアル-php.cn

div+css による Web ページレイアウトデザインの新たな始まり (5)

黄舟

リリース： 2016-12-29 14:28:00

オリジナル

1235 人が閲覧しました

内側と外側のマージンを結合する問題について話しましょう

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

ログイン後にコピー

レイヤーaの下マージンは20pxです
下の写真を見てください

div+css による Web ページレイアウトデザインの新たな始まり (5)

次に、緑色のレイヤーの上マージンを10pxに変更します

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

ログイン後にコピー

div+css による Web ページレイアウトデザインの新たな始まり (5)

違いはありません

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

div+css による Web ページレイアウトデザインの新たな始まり (5)

2つのピクセルが同じだったらどうなるでしょうか？すべて 20px の場合

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:20px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

ログイン後にコピー

効果は同じです

div+css による Web ページレイアウトデザインの新たな始まり (5)

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:100px;
background:red;
margin-top:20px;
}
#b{
width:50px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"><div id="b"></div></div> 
</body>
</html>

ログイン後にコピー

ie6

div+css による Web ページレイアウトデザインの新たな始まり (5)

の表示をテストしましょう

Firefoxの表示

div+css による Web ページレイアウトデザインの新たな始まり (5)

は閲覧できます IE6では統合されていませんが、Firefoxでは統合されています

気になる人もいるかも知れません
上のブラウジングボックスに赤い色がつかないのはなぜですか
実際、デフォルトの内余白と外余白があるブラウザはありません

div+css による Web ページレイアウトデザインの新たな始まり (5)

必要なのは

<html>
<head>
<style type="text/css"> 
*{
margin:0;
padding:0;
} #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

ログイン後にコピー

Look

div+css による Web ページレイアウトデザインの新たな始まり (5)