親要素のliタグとその子要素のaタグ。margin と paddingの理解が分かりません。

Question

liタグも、その子要素のaタグも位置としては同じ位置にあると理解して間違いないでしょうか？

そして、同じ位置ならばmarginもpaddingも同じ？

marginは外側に対する余白、paddingは内側に対する余白と分かっているのですが、

どうしてもここが分かりません。

説明がしにくいのですが・・・、たとえば、「あいうえお」というテキストのliタグがあって、
その「あいうえお」にaタグでリンクを設定していたら、liもaも同じ「あいうえお」という場所の事を指しますよね？？？

Answer 1

ちょっと違います。
Chromeの開発者ツールなどの使い方を覚えればそのへんの理解もしやすくなると思いますが、
とりあえず以下のような簡単なコードで可視化して数値を変えながらいろいろ試してみても良いと思います。

<style>
  ul{
    border: 1px solid green;
    margin: 10px;
    padding: 10px;
  }
  li{
    border: 1px solid red;
    margin: 10px;
    padding: 10px;
  }
  a{
    border: 1px solid blue;
    margin: 10px;
    padding: 50px;
  }
</style>

<ul>
  <li>
    <a href="#">text</a>
  </li>
</ul>

これは単純にul→li→aという親子構造です。

Comments

[B_J]

li タグに設定していた margin をやめ、子要素の a タグに同じ数値の padding を設定し、display:blockも設定し、親要素の li に marginを 指定した時と同じ高さをもたせたら、margin を padding に変えても変わりませんよね？

そう考えると、内側？外側？ってのが全然分からなくなるんですが・・・・

[B_J]

いただいたコードを下記のようにすると、liとaが完全に重なりますよね？そうなると、どこがmargin？どこがpadding？と混乱してくるのです。。。

<style>
ul{
border: 1px solid green;
margin: 10px;
padding: 10px;
}
li{
border: 1px solid red;
margin: 10px;
//padding: 10px;
}
a{
border: 1px solid blue;
//margin: 10px;
padding: 50px;
display:block;
}
</style>

<ul>
<li>
<a href="#">text</a>
</li>
</ul>

[gas.engine]

赤線(liのborder)と青線(aのborder)が完全に重なったとき、青線から文字までの距離がaのpaddingです。
赤線と青線の距離はliのpaddingとaのmarginの合計になっていますね。

[B_J]

あ、もちろん、paddingは10にしても同じです

[B_J]

青線から文字までの距離がaのpadding➡これは分かりました。

赤線と青線の距離はliのpaddingとaのmarginの合計になっていますね➡これが分かりません。

そして、赤線からどこまでの距離がliのmarginなのでしょうか？

[itagagaki]

やっぱりChromeの開発者ツールで見てみるのがオススメです。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider https://www.buildinsider.net/web/chromedevtools/01

Elementsパネルの「要素の属性／スタイルの確認」のところを中心に読んでみてください。

[B_J]

分かりません。あともう少しで分かると思うのですが・・・。

青線から文字までの距離がaのpadding➡これは分かりました。

赤線と青線の距離はliのpaddingとaのmarginの合計になっていますね➡これが分かりません。

そして、赤線からどこまでの距離がliのmarginなのでしょうか？

[B_J]

デベロッパーツールは駆使しているので使い方も分かっているんです。

ただ、marginとpaddingが同じ？と言うのが分からないのです。

li タグに設定していた margin をやめ、子要素の a タグに同じ数値の padding を設定し、display:blockも設定し、親要素の li に marginを 指定した時と同じ高さをもたせたら、margin を padding に変えても変わりませんよね？

そうした場合に、

paddingというのは、先ほどいただいたコードの例でいうと、どこからどこまでの距離のことで、
marginというのはどこからどこまでの距離のことなのでしょうか？

ここを教えて頂ければ分かるかもしれません。

[B_J]

あ、先ほどのというのは、私がいじって、枠が重なった場合のコードです。すみません。よろしくお願いします。

[itagagaki]

回答に書いたコードではborderで線が描かれています。
borderの内側の余白がpadding
borderの外側の余白がmargin

赤線と青線の間には、赤線の内側にliのpaddingと、青線の外側にaのmarginがあります。
だから赤線と青線の距離はliのpaddingとaのmarginの合計になります。

liのmarginは、赤線の外側にあります。ただ、そこには親要素ulのpaddingもあります。なのでulのpaddingを0にすれば、緑線と赤線の間の距離がliのmarginとなります。

[B_J]

すごい！少しわかってきたかもです！

ざっくりとですが、前提として、
まず、liよりaのほうが内側にあるんですか？

だから、極端な話、ってことかもしれませんが、

liの内側にあるaに向かってのpadding、aの外側のliに向けてのmargin
ってことでしょうか？←ここ一番聞きたいです！

親に対して子供は必ず内側にある？！

[B_J]

あ、ちょっと待ってください、一つ戻って、でも、私が記載したコードだと、
liはmargin、aがpaddingとなっていますが・・・？

分かったと思ったのにまた分からなくなってしまいました・・・。お助けを・・・。

<style>
ul{
border: 1px solid green;
margin: 10px;
padding: 10px;
}
li{
border: 1px solid red;
margin: 10px;
//padding: 10px;
}
a{
border: 1px solid blue;
//margin: 10px;
padding: 10px;
display:block;
}
</style>

<ul>
<li>
<a href="#">text</a>
</li>
</ul>

[itagagaki]

そうです。原則的に、親のpaddingの内側のコンテンツ領域に子供が入ります。

一応、ボックスモデルについて：
[CSS] ボックスモデル(Box Model)の構造を理解するhttps://www.billionwallet.com/homepage/boxmodel.html

それを踏まえて開発者ツールを見てみてください。

[B_J]

すみません、追加であの後すぐに質問してしまったのでそちらをまず教えて下さいますでしょうか・・・？

[B_J]

いや、やはりだめです。自分の中で、いただいたコードの、textのことをaのリンクと考えてしまっていて、listの事を漠然と外側にある四角と考えてしまっています。
泥沼です・・・

[itagagaki]

まずボックスモデルを頭に入れてください。
liというボックスの中のコンテンツ領域に、子供としてaが入って、そのaというボックスの中のコンテンツ領域にtextが入ります。

コンテンツ領域とはpadding領域の内側です。

//padding: 10px;
//margin: 10px;
こうしてコメントアウトして考えるから混乱しちゃっているんですかね。

li{
margin: 10px;
border: 1px solid red;
padding: 0px;
}

という形のボックスの中に

a{
margin: 0px;
border: 1px solid blue;
padding: 10px;
display:block;
}

というボックスがあるというだけのシンプルな構造です。

[B_J]

画像を質問編集で見たので、見て頂いて良いですか？あーいうことでしょうか？

有効にしている、liのmarginとaのpaddingはどのように考えたらよろしいのでしょうか？
textという文字からどこまでがmarginで、どこまでがpadding？

それから、最初の質問に立ち戻って、再度ここで聞かせて下さい

li タグに設定していた margin をやめ、子要素の a タグに同じ数値の padding を設定し、display:blockも設定し、親要素の li に marginを 指定した時と同じ高さをもたせたら、margin を padding に変えても変わりませんよね？

そう考えると、内側？外側？ってのが全然分からなくなるんですがここはどう考えれば？？？

[B_J]

おはようございます。本日も引き続きよろしくお願い致します。お待ちしております。

[itagagaki]

まず、marginやpaddingについて、「有効にする／しない／やめる」とか「marginをpaddingに変える」とかいう概念がそもそもズレています。
marginやpaddingは、ボックスモデルには必ずあるものです。0を指定すれば幅が0になるだけです。

textという文字があるのはaのコンテンツ領域です。
コンテンツ領域の外側にaのpadding領域があります。
そしてその外側にaのborder領域があって、さらに外側にaのmargin領域があります。

以上は、親要素であるliのコンテンツ領域にあります。
そのコンテンツ領域の外側にliのpadding領域があります。
そしてその外側にliのborder領域があって、さらに外側にliのmargin領域があります。

単純な話ですよね？

liのborder領域（赤線）とaのborder領域（青線）の間には、
・liのpadding領域（コンテンツ領域まで）
と
・aのmargin領域（aのborder領域まで）
があります。

これが合わさって、赤線と青線の間の余白になります。

これが 10 + 0 でも、0 + 10 でも、結果は同じ幅ということになります。

では、レイアウトの際に、余白をpaddingで作るか、marginで作るかというのは、慣れていないと確かにちょっと悩む問題です。borderがある場合はあまり悩む余地はありませんが。

marginには、margin同士が隣り合ったときに、単純に足し算になるのではなく、相殺されるということも理解しておく必要があります。

[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

[B_J]

>まず、marginやpaddingについて、「有効にする／しない／やめる」とか「marginをpaddingに変え
>る」とかいう概念がそもそもズレています。
>marginやpaddingは、ボックスモデルには必ずあるものです。0を指定すれば幅が0になるだけです。

marginやpaddingはボックスモデルなのですね？

>textという文字があるのはaのコンテンツ領域です。
ここもまだピンと来てないのですが、liに設定したtextなのに、liではないのですか？aの領域？
それとも、liの領域でもあり、その内側のaの領域でもある、と言った方が正しいってことでしょうか？

それ以下については、ものすごく理解できました！！本当に本当にありがとうございます。
今後とも助けて頂けたら非常に嬉しいです。

[itagagaki]

> marginやpaddingはボックスモデルなのですね？

ボックスモデルを構成するパーツとしてmarginやpaddingがあるということです。
もう一度貼りますね。
[CSS] ボックスモデル(Box Model)の構造を理解するhttps://www.billionwallet.com/homepage/boxmodel.html

> ここもまだピンと来てないのですが、liに設定したtextなのに、liではないのですか？aの領域？

"text"は、あくまでも a のコンテンツ（内容）です。liとの直接の結びつきはありません。

たとえば
<li>前<a href="#">text</a>後</li>
では、liに直接結びついているのは【前<a href="#">text</a>後】というコンテンツになります。

> それとも、liの領域でもあり、その内側のaの領域でもある、と言った方が正しいってことでしょうか？

まあ、そうですね。

[B_J]

お二人にベストアンサーにしたかったのですが、最初が早かったもう一方にさせて頂きました。本当にごめんなさい。次回こそは。よろしくお願い致します。この後すぐに質問します！

Answer 2

<li>タグのmarginとpaddingです。 marginは、オレンジの部分 paddingは、薄緑の部分 

<a>タグのmarginとpaddingです。
オレンジがmargin
薄緑がpadding

外側のliのpaddingと内側のaのmarginが0になると境界線が重なる意味がわかっていただけましたでしょうか？

Comments

[B_J]

ご親切にありがとうございます。いただいた画像は、下記のコードを前提にしておられまよね？
（線の色など）
ulが緑、liが赤、aが青

こちらを教えて頂いてから、質問をしたいです。
1枚目の画像を見ると、liが緑の線のような気がしまして・・・

<style>
ul{
border: 1px solid green;
margin: 10px;
padding: 10px;
}
li{
border: 1px solid red;
margin: 10px;
//padding: 10px;
}
a{
border: 1px solid blue;
//margin: 10px;
padding: 50px;
display:block;
}
</style>

<ul>
<li>
<a href="#">text</a>
</li>
</ul>

[B_J]

すいません！やっと理解できました！！本当に本当に感謝します。ありがとうございます。

[gas.engine]

ご理解いただけて良かったです。ありがとうございました！

Answer 3

liタグはブロックレベル要素、aタグはインライン要素のため、aタグにはmarginやpaddingは通常は表示されないようです。

そのためaタグでも、”display:block;”として、margin,paddingを追加すれば反映されました。

参考：aタグにpaddingやmarginが効かない

参考：ブロックレベル要素とインライン要素

また、liタグの中のaタグのmarginをより大きくするとこちらが優先されました。

<html>
    <style>
        li{
            margin: 40px 30px;
        }
        a{
            margin: 100px 100px;
            display: block;
        }
    </style>
<body>

<ul>  
    <li>
        <a href="#">あいうえお</a>        
    </li>
</ul>
    
</body>
</html>

Comments

[B_J]

早速ありがとうございます。本当に助かります。

同じ位置という理解はどうでしょうか？

[B_J]

おっしゃるとおり、aタグに、”display:block;”として、margin,paddingを追加した場合の話なのです。

その場合、liにmarginを設定するのと、aにdisplay: block;とpaddingを設定すると、全く同じ記載になるのです。

それを考えると、marginが外？paddingが内？っていうのが訳が分からなくなってきてしまいまして・・・。

[gas.engine]

「位置が同じ」という意味がよくわかりませんが、別の回答者のサンプルのほうがわかりやすいですね。そちらのaタグに　display:blockを入れたりmarginを変化させてみてください。

aタグにmarginやpaddingはあるもののインライン要素のときは無視される感じです。
それぞれのタグにそれらはありますね。

[B_J]

li タグに設定していた margin をやめ、子要素の a タグに同じ数値の padding を設定し、display:blockも設定し、親要素の li に marginを 指定した時と同じ高さをもたせたら、margin を padding に変えても変わりませんよね？

そう考えると、内側？外側？ってのが全然分からなくなるんですが・・・・

[gas.engine]

marginがborderの外で、paddingが内側ですね。
liのmarginと、aのpaddingは異なります。

[B_J]

先ほどの方にいただいたコードを下記のようにすると、liとaが完全に重なりますよね？そうなると、どこがmargin？どこがpadding？と混乱してくるのです。。。

<style>
ul{
border: 1px solid green;
margin: 10px;
padding: 10px;
}
li{
border: 1px solid red;
margin: 10px;
//padding: 10px;
}
a{
border: 1px solid blue;
//margin: 10px;
padding: 50px;
display:block;
}
</style>

<ul>
<li>
<a href="#">text</a>
</li>
</ul>

[B_J]

あ、もちろん、paddingは10にしても同じです

[gas.engine]

liのpaddingは子要素のaに対してです。
aのmarginは親要素のliに対してです。
お互い0になれば境界はくっつきます。
liのpaddingとaのpaddingと同じになったわけではありません。

[B_J]

liのmarginと、aのpaddingですよね？
お互い０とはどういうことでしょう？

marginは外側、paddingは内側への余白なのに、
まだ混乱しています。

[gas.engine]

＞liのmarginと、aのpaddingですよね？
＞お互い０とはどういうことでしょう？

いえいえ、li（外側にある親要素）のpadding（境界の内側）とa（内側にある子要素）のmargin（境界の外側）を0に設定すれば相互の距離が無くなって境界はくっつきます。

WindowsであればF12を押すとChromeデベロッパーツールが開くので、
elementやcssにマウスを合わせて変化を確認してください。

使い方のリンクを貼っておきます。
https://nandemo-nobiru.com/2944/

[B_J]

>いえいえ、li（外側にある親要素）のpadding（境界の内側）とa（内側にある子要素）のmargin（境界の
>外側）を0に設定すれば相互の距離が無くなって境界はくっつきます。

ここはなるほど、良く分かりました。
デベロッパーツールは駆使しているので使い方も分かっているんです。

ただ、marginとpaddingが同じ？と言うのが分からないのです。

li タグに設定していた margin をやめ、子要素の a タグに同じ数値の padding を設定し、display:blockも設定し、親要素の li に marginを 指定した時と同じ高さをもたせたら、margin を padding に変えても変わりませんよね？

そうした場合に、paddingというのは、先ほどのコードの例でいうと、どこからどこまでの距離のことで、marginというのはどこからどこまでの距離の事なのでしょうか？

ここを教えて頂ければ分かるかもしれません。

[B_J]

あ、先ほどと言うのは間違いです、私がいじって、枠が重なった場合のコードの場合の話です。すみません。よろしくお願いします。

[gas.engine]

枠が重なった場合（liの）paddingを消したときですよね？

何度も言っているような気がしますが、
赤線(li)と青線(a)の距離＝liのpaddingのpx＋aのmarginのpx
liのpaddingのpxが0、
aのmarginのpxが0、
なら両方の線は一致しますよね？

[B_J]

少しわかってきたかもです！
ざっくりとですが、前提として、
まず、liよりaのほうが内側にあるんですか？
だから、liの内側にあるaに向かってのpadding、aの外側のliに向けてのmargin
ってことでしょうか？←ここ一番聞きたいです！

[B_J]

あ、ちょっと待ってください、一つ戻って、でも、私が記載したコードだと、
liはmargin、aがpaddingとなっていますが・・・？

分かったと思ったのにまた分からなくなってしまいました・・・。お助けを・・・。

<style>
ul{
border: 1px solid green;
margin: 10px;
padding: 10px;
}
li{
border: 1px solid red;
margin: 10px;
//padding: 10px;
}
a{
border: 1px solid blue;
//margin: 10px;
padding: 10px;
display:block;
}
</style>

<ul>
<li>
<a href="#">text</a>
</li>
</ul>

[gas.engine]

<ul>
<li>
<a href="#">あいうえお</a>
</li>
</ul>

＞「liよりaのほうが内側にあるんですか？」
こう書いていますので、大前提として、それはその通りです。

aタグはインライン要素なので、通常はその中にliタグを入れません。
display: block;をaタグにつければ入れられるようですが。。

＞liはmargin、aがpaddingとなっていますが・・・？

＞//padding: 10px;

cssのコメントアウトは正しくは以下のようにします。
/* padding: 10px; */

liのpaddingとaのmarginが利かなくなっているのですから距離は0になるのが自然ではないですか？

[B_J]

>liのpaddingとaのmarginが利かなくなっているのですから距離は0になるのが自然ではないですか

確かに。もう一方のご教示で、原則的に、親のpaddingの内側のコンテンツ領域に子供が入ります、とのことなので、それを考えるとより納得です。。。
もう少しです！たぶん・・・。

ただ、それはその通り理解したということで、おいておいて、

有効にしている、liのmarginとaのpaddingはどのように考えたらよろしいのでしょうか？
textという文字からどこまでがmarginで、どこまでがpadding？

自分の中で、いただいたコードの、textのことをaのリンクと考えてしまっていて、listの事を漠然と外側にある四角と考えてしまったりしています。
泥沼です・・・もう少しで分かりそうなのですが・・・

[gas.engine]

＞有効にしている、liのmarginとaのpaddingはどのように考えたらよろしいのでしょうか？
liのmarginは協会の外側、親要素のulの内側の部分に反映されています。

＞textという文字からどこまでがmarginで、どこまでがpadding？

aタグでは、textという文字のギリギリから境界線までがpaddingです。
aタグのmarginは境界線の外側なのでtextとは接しません。

[B_J]

画像を質問編集で添付したので、見て頂いて良いですか？あーいうことでしょうか？横ですみませんが。

>liのmarginは協会の外側、親要素のulの内側の部分に反映されています。
ここは良く分かりました。

>aタグのmarginは境界線の外側なのでtextとは接しません。

aタグもliタグも同じ枠ですよね？ごめんなさい、泥沼化してます。

明日また頭をさっぱりさせて考えます・・・。

[gas.engine]

別の回答で画像を追加しましたのでご確認ください。
更新された画像は正しいと思われます。

最初の質問の時点で<li>の外に<a>タグを想定されていたためか話が進まなかったのかもしれません。
通常は前述しましたように、<a>タグがインライン要素なので内側に入ります。

[B_J]

おはようございます。本日も何卒宜しくお願い致します。liの外にaタグを想定してはいません。むしろ、li
タグの内にaタグがあるのをイメージしておりました。