階層単位で左余白を空けたい
状態:-
閲覧数:1,298
投稿日:2017-12-31
更新日:2017-12-31
案1.一般兄弟セレクタ
案2.マイナスmargin
「案1.一般兄弟セレクタ」を使用
・指定兄弟要素(h1～h5タグ何れか)のmarginを取得して、指定要素に適用させたい
案2.マイナスmargin
全ての対象行がタグで囲われている場合
「案1.一般兄弟セレクタ」を使用
・指定兄弟要素(h1～h5タグ何れか)のmarginを取得して、指定要素に適用させたい
全ての対象行がタグで囲われていない場合は、「案2.マイナスmargin」を使用
全ての対象行がタグで囲われていない場合
例えば下記のようなケース
<div>
<h3></h3>
<b><b>
・この行(文字列)単位でのタグは適用されていない
</div>
案2.マイナスmargin
1.全体で左余白を空ける
div {
margin-left: 3rem;
}2.階層単位で余白を空けたい要素にマイナスmarginを適用
div h3 {
margin-left: -2rem;
}
div b {
margin-left: -1rem;
}何やってるの？
逆転の発想
・「・この行(文字列)単位でのタグは適用されていない」だけにmargin適用できないため、全体を移動し基準となる位置自体を変更している
直接の子要素に限定していた方が無難かも
HTML
<main>
<h3></h3>
<b><b>
・この行(文字列)単位でのタグは適用されていない
</main>
CSS
main {
margin-left: 3rem;
}
main > h3 {
margin-left: -2rem;
}
main > b {
margin-left: -1rem;
}