カテゴリー:
CSS
閲覧数:179 配信日:2023-01-17 12:27
遭遇例A
HTML
<article class= "hoge" > <h 3 ></h 3 > <p></p> </article> |
CSS
hogeクラス内にあるh2タグの直後のpタグ
.hoge h 3 + p { margin-top : 0 ; } |
遭遇例B
HTML
<p></p> <blockquote></blockquote> |
CSS
Pタグ直後のblockquoteタグ
p + blockquote{ margin-top : -0.5em ; } |
当初「margin-top: 0;」に設定したが、Pタグの「margin-bottom;」設定があるため、期待した効果を得られなかった。
直前のPタグの「margin-bottom;」設定を変更したかったが、直前要素を選択するセレクタはCSSにはないため、直後の要素を選択してマイナス設定値を適用した。
個人的には、極力マイナスmarginを使用したくないのだが……。
レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる