マージン／パディング
参考：
目次
使い方
参考：
Using Percent for Margin and Padding | MattSnider.com
マージン (margin)
参考：
パディング (padding)
参考：
マージンの相殺
マージンが相殺されるケース
次のいずれかの場合にマージンが相殺される。
- 隣接兄弟要素
- 親と子孫を隔てるコンテンツがない
- 空ブロック
マージンが相殺されないケース
floatが指定されている- 絶対位置指定の要素 (
position: absoluteが指定されている)
参考：
margin の相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス
margin の相殺の理解を深めよう | Stocker.jp
margin の相殺の考察 | Tips Note by TAM
margin で発生する問題点と回避方法 | WEB MANABU
padding と margin 相殺 | テーマ開発ドキュメント
What’s the Deal with Collapsible Margins? | bitsofcode
パーセント指定
margin-top / margin-bottom についても親要素の横幅が基準となる。
参考：
CSS で上下 margin のパーセント (%) 指定が上手く行かない原因 | かきしちカンパニー
レスポンシブ Web デザインでハマりがちな % 指定 | Design Spice
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 の上下の高さの指定が効かない！原因と対処法 | ソロ学
まだ違いに迷っているの？ブロック要素、インライン要素の違いを完全に理解しよう | アールエフェクト