全ての対象行がタグで囲われていない場合は、「案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;

}