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

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

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

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

CSS

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

解決済

CSSのmargin: 0 auto について

yuupon
yuupon

総合スコア2

HTML

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

CSS

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

1回答

0リアクション

0クリップ

189閲覧

投稿2022/08/11 09:31

編集2022/08/11 09:52

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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