【CSS】marginとpaddingの余白の違い
CSSの基礎、marginとpaddingの余白の違いをしっかり理解する事は脱初心者として重要です。
margin…要素の外側の余白
padding…要素内側の余白
この図のような感じでボーダーを境目に内側がパディング、外側がマージンとなっています。
これはdivやpタグ、h1～h6などのブロック要素に適用できます。
ではインラインの場合はどうでしょう。
インライン要素の場合の余白は…？マージンが効かない？!
aやspan、imgなどのインラインの要素はブロック要素とは余白の付き方が異なります。
(後程追記でimgについて訂正しています。21.02.15追記)
上図のようにインライン、つまり横並びの行内での余白調整になるので上下のマージンが効かず、左右のみに適用されます。
また、パディングは上下へ効くのですが自分以外の他の要素への影響はなく、次の行の他の要素はパディング内に重なってしまいます。
これらを回避するのはインラインブロック要素です。
display: inline-block;
このCSS指定でブロック要素とインライン要素の中間ともいえる、上下の余白の調整が効くインラインブロック要素になります。
困った時は「display: inline-block」を使ってみるとよいでしょう。
「ブロックレベル要素/インラインレベル要素という概念はHTML5では廃止されている」
実はここで何度も使用しているインライン要素やブロック要素というのはHTML5以前までの考え方。
HTML5ではコンテンツカテゴリという7つの分類でHTMLタグは分けられています。
ただ、フレージングコンテンツはインライン要素の性質をもつなど、これらの分類の中でもブロックレベル要素の性質を持つものやインライン要素の性質をもつものがあります。
CSSのプロパティでも「display:block;」「display:inline;」は以前と同じように使っているので、厳密には廃止と言っても使い方は大きく変わらないというところでしょう。
インラインでも画像タグではマージン上下が効きます(21.02.15追記)
ちょっとレッスン中にこの説明をしていてあれ？と予期せぬ挙動になったので、改めて検証してみました。
どうやらimgタグには上下のマージンも効くようです。
インラインと一概に言えないのはHTML5での
- フロー・コンテンツ
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
- インタラクティブ・コンテンツ
- パルパブル・コンテンツ
このあたりの分類によるものですね。
奥が深いです。。。
参考
リンク
リンク
