親要素のプロパティが子要素に反映されない場合の対策

はじめに

親要素に指定したのが子要素にも反映される。
はずなのに、子要素に反映されないプロパティがあるのはなんでか。

やっとtext-align: center;を使いこなせるようになったと思ったら、新たな壁にぶつかりました。
親要素にプロパティ指定してるのに、なんでだー？と思ったのでまとめました。

結論

ブロック要素には、個別にプロパティを指定する必要がある。
プロパティの中には、親要素にプロパティを指定しても、子要素がブロック要素であれば、親要素に指定したプロパティは反映されない。

➡️ ブロック要素ってブロックであることへのこだわりが強い。
　ブロック要素は「親がどんなこと求めてきても、あくまでも私は私だから」的な。
子には子にあったプロパティを指定しないということ聞いてくれない。

△ 私が実際にハマったのは、、、

❌　NG

index.html

<div class="contents-wrapper">
  <div class="item">
    <div class="item-icon">
      <img src="./images/多角形 1.png" alt="">
      <p>ブロック要素</p>
    </div>
    <div class="txt-contents">
      これはひとつめですこれはひとつめですこれはひとつめです
      これはひとつめですこれはひとつめですこれはひとつめです
    </div>
  </div>
</div>

style.css

.contents-wrapper {
  width: 100%;
  text-align: center;/*親要素に中央寄せ指定*/
}

.item {
  position: relative;
}

p {
  position: absolute;
  top: 100px;/*親要素に中央寄せ指定してるから上下の調整だけでいいはず*/
}

.txt-contents {
  width: 80%;/*親要素に対して幅80％にするだけでいいはず*/
}

.contents-wrapperにtext-align: center;（中央寄せ）を指定してるのに、、、

→<p>は下げられてるけど、真ん中に配置されない。（テキストは中央寄せになってる）
→.txt-contentsのテキストは中央寄せになっていて幅も80％にはなってるけど、.txt-contents自体は真ん中に配置されない。

？: なんで真ん中に配置されないのか

text-align: center;（中央寄せ）はテキストなどのインライン要素に適用される。
　→ 文字自体は中央寄せにできる。だけど、配置そのものには影響を与えない。
　→<p>と<div class="txt-contents">はもともとブロック要素なので配置については個別設定が必要。

２つのことを同時に解決しようとしていたのが間違いだった。

私がしたかったのは、
textを中央寄せに　かつ　真ん中に配置　
の2つの工程が必要だった。

だから、
①text-align: center;でtextの位置を設定。
②ブロック要素の配置を設定。
が必要。

⬇️具体的な設定

⭕️ OK
①<p>：親要素（.item）に対して100％になるように幅指定。
②<div class="txt-contents">：display: inline-block;でブロック要素をインラインブロック要素になるよう指定し、親要素に指定してるtext-align: center;（中央寄せ）を反映させる。

style.css

.contents-wrapper {
  width: 100%;
  text-align: center;
}

.item {
  position: relative;
}

p {
  position: absolute;
  top: 100px;
  width: 100%;/*親要素（.item）に対して100％になるように幅指定*/
}


.txt-contents {
  width: 80%;
  display: inline-block;/*ブロック→インラインブロックにしてtext-alignを反映させる*/
}

おわりに

ブロック要素にはブロック要素の、インライン要素にはインライン要素のプロパティがそれぞれある。みんな違ってみんないい的なかんじだけど、コーディングする上ではその多様性が難しく感じます。
インライン要素のプロパティを使いたい時には、display: inline-blockでインライン要素にしてしまえ〜。ていう便利な機能があることに早く慣れたいです。
親要素に設定しても、子要素がブロック要素であれば直接反映されないことが多いのは他に、下記がある。
line-height
vertical-align
white-space
font-*
これらは、子要素に対して個別に設定していく！

あー気をつけることがたくさんだ〜〜〜。

※間違ってたらご指摘いただけると嬉しいです！
よろしくお願いします！