スタイルシートでデザインを作り込んでいく時、思った通りに margin が効いてくれない事があります。
<div>要素は背景色を黄色にしています。
<body>要素も<div>要素も margin は 0px に設定しているので、余白なく黄色い四角が表示されるように思いますが実際は隙間が空いてしまいます。
<h1>要素の margin が親要素である <div>要素を超えて適用されています。
このような現象は <div>要素の padding と border が共に 0px の場合に起こります。
margin には接する要素の margin を相殺するという仕様があります。
相殺されるケースは以下のような場合です。
相殺されると値の大きい方の margin だけが適用されます。
overflow はボックス内に要素が入らない場合の挙動を指定するものです。
hidden; ははみ出す部分は非表示にするという指定ですが、親要素の Width や Height が Auto (初期値) の場合はボックスサイズが変わるので問題ありません。
marginは 0px なはずなのに・・・
以下の例を見てください。<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type='text/css'><!--
body{
background-color:#ffffff;
margin: 0;
}
.div1{
background-color:#ffff00;
margin: 0px;
}
--></style>
</head>
<body>
<div class='div1'>
<h1>タイトル</h1>
<p>テスト</p>
</div>
</body>
</html>
<div>要素は背景色を黄色にしています。
<body>要素も<div>要素も margin は 0px に設定しているので、余白なく黄色い四角が表示されるように思いますが実際は隙間が空いてしまいます。
隙間の正体
この隙間は<h1>要素の margin です。<h1>要素の margin が親要素である <div>要素を超えて適用されています。
このような現象は <div>要素の padding と border が共に 0px の場合に起こります。
margin には接する要素の margin を相殺するという仕様があります。
相殺されるケースは以下のような場合です。
- 親要素の margin-top と先頭の子要素の margin-top
- 親要素の margin-bottom と 最後の子要素の margin-bottom
- 同階層の最初の要素の margin-bottom と 次の要素の margin-top
相殺されると値の大きい方の margin だけが適用されます。
対処方法
親要素のスタイルシートに「overflow: hidden;」を追加します。overflow はボックス内に要素が入らない場合の挙動を指定するものです。
hidden; ははみ出す部分は非表示にするという指定ですが、親要素の Width や Height が Auto (初期値) の場合はボックスサイズが変わるので問題ありません。
.div1{
background-color:#ffff00;
margin: 0px;
overflow: hidden;
}
コメント
コメントを投稿