とあるサイトの模写練習の課題を、お手本コードを見ながら取り組んでいたのですが、
添付コードの
header .container の、margin: 0 autoを
コメントアウトすると、headerと #mainvisual img の間に
画像のように空白が出来てしまうのですが、
何故でしょうか?
今まで学んできた知識だと、margin: 0 autoは、要素を中央揃え
にするという意味しか分からず、
調べてみてもわかりませんでした。
この時 margin:0 auto はどのような役割をしているのでしょうか?
margin:0 autoで上下の空間がなくなっているとしても、画像の上に空間が出来るのは何故でしょうか?
詳しい方、よろしければご教授をお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content="テキストテキストテキスト"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Profile</title> 9 <link rel="icon" href="img/favicon.ico"> 10 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 11 <link rel="stylesheet" href="css/style2.css"> 12</head> 13<body> 14 <!-- ヘッダー --> 15 <header> 16 <div class="container"> 17 <h1 class="site-title"> 18 <a href="index2.html"> 19 <img src="img/logo.svg" alt="Profile"> 20 </a> 21 </h1> 22 <nav> 23 <ul> 24 <li> 25 <a href="#about"> 26 About 27 </a> 28 </li> 29 <li> 30 <a href="#bicycle"> 31 Bicycle 32 </a> 33 </li> 34 </ul> 35 </nav> 36 </div> 37 </header> 38 39 <main> 40 <!-- メインビジュアル --> 41 <div id="mainvisual"> 42 <img src="img/mainvisual.jpg" alt="テキスト"> 43 </div> 44 45 <!-- About セクション --> 46 <section id="about"> 47 <div class="container"> 48 49 </div> 50 </section> 51 52 <!-- bicycle セクション --> 53 <section id="bicycle"> 54 <div class="container"> 55 56 </div> 57 </section> 58 </main> 59 60 <!-- フッター --> 61 <footer> 62 63 </footer> 64</body> 65</html>
css
1@charset "UTF-8" 2 3/* common */ 4html { 5 font-size: 100%; 6} 7 8body { 9 color: #383e45; 10 font-size: 0.9rem; 11} 12 13a { 14 text-decoration: none; 15} 16 17img { 18 max-width: 100%; 19} 20 21li { 22 list-style: none; 23} 24 25.container { 26 outline: 2px solid red; 27 max-width: 960px; 28 margin: 0 auto 100px auto; 29 padding: 0 4%; 30 text-align: center; 31} 32 33 34/* header */ 35 36header .container { 37 background: skyblue; 38 display: flex; 39 justify-content: space-between; 40 align-items: center; 41 margin: 0 auto; 42} 43 44.site-title { 45 width: 120px; 46 line-height: 1px; 47 padding: 10px 0; 48} 49 50.site-title a { 51 display: block; 52} 53 54header ul { 55 display: flex; 56 padding: 10px 0; 57 58 59} 60 61header li + li { 62 margin-left: 30px; 63} 64 65header li a { 66 color: #24292E; 67} 68 69header li a:hover { 70 opacity: 0.7; 71} 72 73/* main-visual */ 74 75#mainvisual { 76 margin-bottom: 80px; 77} 78 79#mainvisual img { 80 display: block; 81 width: 100%; 82 max-width: 1920px; 83 height: 600px; 84 object-fit: cover; 85} 86 87@media screen and (max-width: 600px) { 88 #mainvisual img { 89 height: calc(100vh - 60px); 90 } 91} 92 93 94 95
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/11 10:45