[CSS] コンテンツ内の最後の要素にかかっている不要な余白をキャンセルするCSSの叡智が凄い

[CSS] コンテンツ内の最後の要素にかかっている不要な余白をキャンセルするCSSの叡智が凄い

バリスタ

に選定していただきました。✌('ω')✌

[CSS] コンテンツ内の最後の要素にかかっている不要な余白をキャンセルするCSSの叡智が凄い

コレは思いつかなかった。

コンテンツエリアの最後のパラグラフにmarginが残っていることが、何かと不満でした。

どういうことかというと、ブログ文章を読みやすくするために<p>あたりにmarginがかかっていると思います。すると当然最後<p>にもmarginがかかります。

2014-1-17-0002

これ。このmarginは、正直いりません。僕は親要素の<div>でコンテンツ部分のmarginを制御したいと考えるからです。

いやいいやんと思うかもしれませんが、そこはグラフィック畑の私、気になります。私気になります!

もちろんクラスを付けたり力業で消すことはそこまで難しくないんですが、コードがスマートすぎるのでご紹介。

詳しくは上記を参照して頂きたいのですが

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

例えば自分のブログに置き換えるなら、あなたが読んでいるこのメインコンテント部分は「post-content」とクラスを打っているので。

.post-content > *:last-child,
.post-content > *:last-child > *:last-child,
.post-content > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

例えばコンテンツ部分の最後にリストがきても、divで入れ子にしても、中の中にまで突っ込んでmarginをキャンセルしてくれます。

疑似要素と、Universal selector(*)の組み合わせですが、実にスマート。

セレクタ – CSS2リファレンス

数式が美しい!とかコードが美しい!とか正直意味がわかりませんでしたが、コレばっかりは素直にひれ伏しました。

感動を禁じ得ません。

参考:パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法 | コリス

文:シンタロヲフレッシュ

フォロワーともだちになってもらえると、とても嬉しい!

友だち追加
友だち追加

フォローはまだちょっと…? ではブログの定期購読はどう?

follow us in feedly
↓今月の特集もあわせてチェック!↓
月刊 prasm 7月号「便利さは超弩級!小さいモノ特集」
月刊 prasm 7月号

「「小さい」ことはいいことだ」

\シェア多謝!/

コメントは大切に読ませてもらっています。

一緒に読んで欲しい記事

前の記事(Previous)
[CSS] olの数字をCSSでいい感じに装飾する方法
次の記事(Next)
[CSS] 背景画像(パターン)は固定にしてみる。という視点もあるよ

関連するおすすめ商品

#128 著者: 216 Amazonでチェック