Webデザイン学習10月03日(月) マージン上下の相殺
マージン左右は相殺されない
相殺されるのは上下だけ。
単にマージンは相殺されると覚えていました。
上記の画像のスタイルシート
<style type="text/css"> *{ margin: 0 auto; padding: 0 auto; } body{ font-size: 100%; font-weight: normal; font-style: normal; color: #000000; background-color: #cff; } #container{ width: 500px; height: auto; background-color: #FFF; margin: 0 auto; padding: 10px 0; } #header{ width: 480px; height: 50px; background-color: #999; margin: 0 10px 10px 10px; } #wrapper{ width: 500px; height: auto; overflow: auto; } #content{ width: 300px; height: 200px; background-color: #FCC; float: right; margin: 0 10px 10px 10px; } #sidebar{ width: 170px; height: 200px; background-color: #FF3; float: left; margin: 0 0 10px 10px; } #footer{ width: 480px; height: 50px; background-color: #99F; clear: both; margin: 0 10px 0 10px; } </style>
wrapperにoverflow: auto;の指定が抜けてました。
overflowはまだまだ体感出来ていません。#footer との空きをつくるために入れているようです。
headerの下マージンはwrapperがあるので、相殺されませんでした。
余白は上ではなく下に作る
余白は上ではなく下に作るのが基本のようです。
(clearの上をあけることは出来ない)
×
○
余白15pxの課題
この課題ではwrapperにoverflow: auto;を指定しmargin-bottom: 15px;付けていると、
footerにclear: both;を指定しなくても、wrapperの裏に隠れない事が体感できました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>1003test</title> <style type="text/css"> *{ margin: 0 auto; padding: 0 auto; } body{ font-size: 100%; font-weight: normal; font-style: normal; color: #000000; background-color: #cff; } #container{ width: 510px; height: auto; background-color: #FFF; margin: 0 auto; padding: 15px 0; } #header{ width: 480px; height: 50px; background-color: #999; margin: 0 auto 15px auto; } #wrapper{ width: 480px; height: auto; overflow: auto; margin: 0 15px 15px 15px; } #content{ width: 300px; height: 200px; background-color: #FCC; float: left; } #sidebar{ width: 165px; height: 200px; background-color: #FF3; float: right; } #footer{ width: 480px; height: 50px; background-color: #99F; margin: 0 auto; } </style> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="sidebar"> <p>sidebar</p> </div> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
単純な構造でしっかり体感すると勉強になります