スタイルシートによる背景色の指定について

質問

【HTML】
<main class="base_color">
<div class="test1">あいうえお</div>
<div class="test4">
<div class="test2">かきくけこ</div>
</div>
<div class="test3">さしすせそ</div>
</main>

【CSS】
.base_color{
background-color: yellowgreen;
color:#fff;
font-weight: bold;
font-size: 20px;
}

.test1{
height:100px;
background-color: blue;
}

.test2{
height:150px;
background-color: blueviolet;
margin: 30px;
}

.test3{
height:200px;
background-color: royalblue;
}

.test4{
/*background-color: yellow;*/
}

この状態で表示させると、「かきくけこ」のコンテンツの周囲が<main>のbase_colorクラスで指定したyellowgreenになるのは予想できました。

そこで、test4の注釈を外して表示させると……。
予想では「かきくけこ」のコンテンツの周囲が親要素に存在するtest4クラスの影響でyellowになると思ったのですが、一部（横側）しか変わりませんでした。

なぜこのようなことになるのでしょうか？
よろしくおねがいします。

回答No.1

noname#262263 · ベストアンサー

>予想では「かきくけこ」のコンテンツの周囲が親要素に存在するtest4クラスの影響でyellowになると思ったのですが、一部（横側）しか変わりませんでした。
それで正しいです。
test4の中で、test2を使ってさらに背景カラーをオーバーライドしてるので、test2の中は、これが有効になっただけです。
background-color: blueviolet;
親からの情報を「上書きしていって最終的な値にしてる」
と理解すれば、解決するかと思います。

お礼

test4には、高さの指定がないため、
高さ=test2の高さとなり、左右のみyellowになるわけですね。
回答ありがとうございました。

回答No.3

retorofan

No.2です。
最後が途切れましたので、追記させて頂きます。

この問題を解決するには、test2のmarginを調整すればよいです。
現状 margin: 30px;
変更 margin: 0;

回答No.2

retorofan

＞なぜこのようなことになるのでしょうか？

そのようなコーディングをしているからです。
具体的には、test2クラスに設定されているmargin: 30px;が原因です。

marginは、要素の外側のスペースを指定するプロパティです。
test2クラスに設定されたmargin: 30px;は、上下左右に30pxのスペースを作ります。
このため、test4クラスの背景色がtest2の周囲全体に適用されず、
横側にしか適用されないように見えるのです。

この問題を解決するには、test2のmarginを調整す

お礼

回答ありがとうございます。
ようやく分かりました！