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

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

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

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

CSS

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

Q&A

解決済

1回答

7005閲覧

margin: 0;の意味について

on_off_on

総合スコア18

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/03/20 02:54

画像のようなヘッダーを作って見たのですが、

イメージ説明

書いたコードを振り返ってみると

HTML

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>manaby</title> 7 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 8</head> 9 10<body> 11 12 <header> 13 <div class="container"> 14 <div class="header-logo"> 15 <img class="logo" src="./second_sozai/header-logo.png"> 16 </div> 17 <div class="header-list"> 18 <ul> 19 <li>リスト1</li> 20 <li>リスト2</li> 21 <li>リスト3</li> 22 <li>リスト4</li> 23 </ul> 24 </div> 25 </div> 26 </header> 27 28 <div class="top-wrapper"> 29 </div> 30 31 <div class="contents-wrapper"> 32 </div> 33 34 <div class="footer-manaby"> 35 </div> 36 37 <footer> 38 </footer> 39 40</body> 41 42</html>

CSS

1body { 2 margin: 0; 3} 4 5*{ 6 font-family: Meiryo; 7} 8 9 10header { 11 height: 90px; 12 width: 100%; 13 background-color: #FE9A2E; 14} 15 16.logo{ 17 float: left; 18 height:60px; 19 width:auto; 20 padding:15px 20px 15px 20px; 21} 22 23ul{ 24 margin:0px; 25} 26 27li{ 28 list-style:none; 29 float:left; 30 font-weight: bold; 31 padding-top:50px; 32 padding-left:20px; 33 color:#ffffff; 34} 35 36.header-list { 37 float: left; 38} 39

というコードなんですが、<ul>タグにmargin:0px;を当てた理由を忘れてしまいました。
このmargin:0px;を外してみると、リスト全体のヘッダー内での下の余白がなくなるんですが、デベロッパーツールで見てみてもボックスモデルの領域の表示は変わらなくて判断ができません。

どなたか教えていただけたら幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

質問者さんがmargin:0px;を割り当てた真意は分からないですが、
各ブラウザ間でデフォルトCSSが異なるため、初期表示を同じにするように「リセットCSS」というものが存在します。
例えばulにmargin:0px;とすることで、あらかじめ設定されているmarginをリセットします。
(書き方を少し突っ込むとmargin:0;でいいのですが…)

自分はとりあえずChromeでしか確認していませんが、user agent stylesheetには下記のようなcssが割り当てられていました。

css

1ul, menu, dir { 2 display: block; 3 list-style-type: disc; 4 -webkit-margin-before: 1em; 5 -webkit-margin-after: 1em; 6 -webkit-margin-start: 0px; 7 -webkit-margin-end: 0px; 8 -webkit-padding-start: 40px; 9}

よく見るmargin-topmargin-bottommargin-rightmargin-leftではないですが、margin:0px;とすることで、マージン関係のCSSをリセットしています。

この-webkit-margin-before-webkit-margin-afterは、ボックスモデルには反映されません。
http://kojika17.com/2012/08/margin-of-css.html

「リセットCSS」で一度調べてください。
そうすると、整理がつくような気がします。

投稿2018/03/20 03:22

編集2018/03/20 03:23
kszk311

総合スコア3404

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

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

on_off_on

2018/03/20 05:15

ありがとうございます!整理がつきそうです! ちなみに、paddingとmargin、どちらでも見た目が変わらないときがよくあるのですが、こうしてmarginの影響などについて調べているとpaddingのほうが影響が少なそうだなと思ったんですが、そのような認識で正しいのでしょうか??
kszk311

2018/03/20 05:28

見た目だけの話であればどちらでもいいのですが、用途が違います。 margin:要素の外側の余白 padding:要素の内側の余白 例えば背景や線をつけたい場合、どちらで余白を取ればいいかなど、 状況に応じて使い分けるのがいいですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問