とあるサイトの模写練習の課題を、お手本コードを見ながら取り組んでいたのですが、
添付コードの
header .container の、margin: 0 autoを
コメントアウトすると、headerと #mainvisual img の間に
画像のように空白が出来てしまうのですが、
何故でしょうか？
今まで学んできた知識だと、margin: 0 autoは、要素を中央揃え
にするという意味しか分からず、
調べてみてもわかりませんでした。
この時 margin:0 auto はどのような役割をしているのでしょうか？
margin:0 autoで上下の空間がなくなっているとしても、画像の上に空間が出来るのは何故でしょうか？
詳しい方、よろしければご教授をお願いいたします。
html
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="テキストテキストテキスト"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Profile</title> <link rel="icon" href="img/favicon.ico"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style2.css"></head><body> <!-- ヘッダー --> <header> <div class="container"> <h1 class="site-title"> <a href="index2.html"> <img src="img/logo.svg" alt="Profile"> </a> </h1> <nav> <ul> <li> <a href="#about"> About </a> </li> <li> <a href="#bicycle"> Bicycle </a> </li> </ul> </nav> </div> </header> <main> <!-- メインビジュアル --> <div id="mainvisual"> <img src="img/mainvisual.jpg" alt="テキスト"> </div> <!-- About セクション --> <section id="about"> <div class="container"> </div> </section> <!-- bicycle セクション --> <section id="bicycle"> <div class="container"> </div> </section> </main> <!-- フッター --> <footer> </footer></body></html>
css
@charset "UTF-8" /* common */html { font-size: 100%;} body { color: #383e45; font-size: 0.9rem;} a { text-decoration: none;} img { max-width: 100%;} li { list-style: none;} .container { outline: 2px solid red; max-width: 960px; margin: 0 auto 100px auto; padding: 0 4%; text-align: center;} /* header */ header .container { background: skyblue; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;} .site-title { width: 120px; line-height: 1px; padding: 10px 0;} .site-title a { display: block;} header ul { display: flex; padding: 10px 0; } header li + li { margin-left: 30px;} header li a { color: #24292E;} header li a:hover { opacity: 0.7;} /* main-visual */ #mainvisual { margin-bottom: 80px;} #mainvisual img { display: block; width: 100%; max-width: 1920px; height: 600px; object-fit: cover;} @media screen and (max-width: 600px) { #mainvisual img { height: calc(100vh - 60px); }}
0 コメント