マージン/パディング

参考:

margin | MDN

padding | MDN

使い方

参考:

Using Percent for Margin and Padding | MattSnider.com

マージン (margin)

参考:

margin | MDN

パディング (padding)

参考:

padding | MDN

マージンの相殺

マージンが相殺されるケース

次のいずれかの場合にマージンが相殺される。

  • 隣接兄弟要素
  • 親と子孫を隔てるコンテンツがない
  • 空ブロック
マージンが相殺されないケース
  • float が指定されている
  • 絶対位置指定の要素 (position: absolute が指定されている)

参考:

margin の相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック | コリス

margin の相殺の理解を深めよう | Stocker.jp

margin の相殺の考察 | Tips Note by TAM

margin の相殺を理解する | Hazu Labo

margin で発生する問題点と回避方法 | WEB MANABU

margin が重なると相殺し合う | yan note

padding と margin 相殺 | テーマ開発ドキュメント

マージンの相殺 | MDN

What’s the Deal with Collapsible Margins? | bitsofcode

パーセント指定

margin-top / margin-bottom についても親要素の横幅が基準となる。

参考:

CSS で上下 margin のパーセント (%) 指定が上手く行かない原因 | かきしちカンパニー

レスポンシブ Web デザインでハマりがちな % 指定 | Design Spice

CSS の上下パーセント指定が難しいのは親要素の幅で決まるから | おち研 技術部

パーセント指定 | Step forward CSS

margin-top を % で指定したら横幅に依存するようになった – teratail

What You Don’t Know About Calculating Percentage Margins in CSS | Hongkiat

Why are margin/padding percentages in CSS always calculated against width? – Stack Overflow

パーセントと px を同時に指定する (calc)

参考:

Can we define min-margin and max-margin, max-padding and min-padding in css? – Stack Overflow

マージンをレスポンシブにする

参考:

min-margin、max-margin、min-padding、max-padding を Sass とメディアクエリで実装 | OCLOCKTEN

レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック | コリス

padding をリンクのクリック領域に含めたい

参考:

How to include padding as part of a div that can be clicked to trigger event – Stack Overflow

インライン要素 (inline)

  • 上下のマージン (margin) は効かない。
  • パディング (padding) は有効であるが、上下のパディングは他の要素と被ってしまう。

※インライン要素にマージンやパディングを設定したい場合は、インラインブロック要素に変更する。

display: inline-block;
margin: 1rem;
padding: 0.5rem;

参考:

span タグ、a タグなどのインライン要素に margin や padding の上下の高さの指定が効かない!原因と対処法 | ソロ学

margin が効かない時の理由と対処法 – Qiita

まだ違いに迷っているの?ブロック要素、インライン要素の違いを完全に理解しよう | アールエフェクト

インライン要素と padding の微妙な関係 | マークアップブログ

インライン要素の余白 | yucako

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA