【CSS】隣接兄弟結合子を使ったマージン調整
CSSの話しです。
YouTuberのKevin Powellが、隣接兄弟結合子(+
)を使ったマージン調整のtipsを紹介してました。
* + * {
margin-top: 1em;
}
見出し(h1
, h2
, h3
)や段落(p
)を縦に並べたシンプルなページを作るとき、縦方向のマージンを調整するために、margin-bottom
を使うことが多いです(私は)。その場合、「last-child
だけマージン無し」みたいな設定も必要なのが難点です。しかし、上記のように隣接兄弟結合子(+
)を使えば一発ですね。目からウロコでした。
余談ですが、「隣接兄弟結合子」は、英語で言うと adjacent sibling combinator です。adjacentの発音が私には「ジェイソン」と聞こえるので、動画でKevinがJSON、JSONと連呼してるのを不思議に思ってました。うん、まぁ英語が聞き取れなくても得るものは多いです。