目次一覧
状態:-
閲覧数:366
投稿日:2023-01-17
更新日:2023-01-17
遭遇例A / 遭遇例B
遭遇例A / 遭遇例B
遭遇例A
HTML
<article class="hoge">
<h3></h3>
<p></p>
</article>
CSS
hogeクラス内にあるh2タグの直後のpタグ
.hoge h3 + 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へマイナス値が設定されていないか、確かめる