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

マージン／パディングの使い方 (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

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