マージン/パディングの使い方 (margin / padding)

参考:

Using Percent for Margin and Padding | MattSnider.com

margin

参考:

margin | MDN

margin-top | 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 Magazine

レスポンシブ 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

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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です