質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

406閲覧

CSSのmargin: 0 auto について

yuupon

総合スコア2

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/08/11 09:31

編集2022/08/11 19:45

とあるサイトの模写練習の課題を、お手本コードを見ながら取り組んでいたのですが、

添付コードの
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

この下marginが活性化するからじゃないですか?

css

1.container{ 2margin: 0 auto 100px auto; 3}

投稿2022/08/11 10:17

recal

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuupon

2022/08/11 10:45

おっしゃる通りでした…! 疲れてくるとどうしても視野が狭くなってしまいます…。 お恥ずかしながら初歩の初歩的なことでしたのに、すぐにご回答頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問