Q&A
それで問題解決でした。
; がなくてもトマト色になったのに、
下にmargin入れると、; がない事で色が機能しないのですね！
経緯
HTMLでは、下記のように書いたとします。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>CSSの学習</title> <link rel="stylesheet"href="css/styles3.css"> </head> <body> <div class="box1"> <!-- BOX1 --> <div class="box2">BOX2</div> </div> <div class="box3">BOX3</div> </body> </html>
CSSには下記のように書いたとします。
.box1{ background-color: orange; width: 200px; height: 200px; } .box2{ background-color:skyblue; width: 50%; height: 50%; } .box3{ background-color: tomato }
ブラウザで確認すると、BOX3の背景色はトマト色になっています。
次にCSSの.box1セレクターの中に、
margin-bottom: 20px;
これを入れると、当然BOX1ろBOX3の余白は20pxになります。
そこで問題なのは、CSSのbox3セレクターの中に、
margin-top: 10px;
これを入れると、「垂直方向でmarginが重なると、小さい方が打ち消される仕様」な為、
BOX1とBOX3の間の余白は30pxにはならない事はわかりました。
が、BOX3背景色のtomato色も消されてしまうのですが、
これも仕様でしょうか？
ドットインストールの説明動画見ている限り、tomato色は消されなかったので疑問に思いました。
今のCSS内のコード↓
.box1{ background-color: orange; width: 200px; height: 200px; margin-bottom: 20px; } .box2{ background-color:skyblue; width: 50%; height: 50%; } .box3{ background-color: tomato margin-top: 10px; }
box3セレクターの、
margin-top: 10px;
だけ文字色が黒なのも気になります。
回答2件
0
CSSは、記述の一番最後のプロパティ以外は、セミコロン「;」がないといけません。
最後でも、あったほうが良いでしょう。
css
1.box3{ 2 background-color: tomato; 3 margin-top: 10px; 4}
投稿2019/01/28 07:58
総合スコア3404
0
ベストアンサー
これで疑問解決！になるわけではないと思いますが
box3セレクターの、
margin-top: 10px;
だけ文字色が黒なのも気になります。
css
1 background-color: tomato; /* ;が抜けてます */ 2 margin-top: 10px;
投稿2019/01/28 07:54
総合スコア80850
解決されたようで何よりです。
CSSはエラー出してくれませんからね・・。
ChromeのDeveloper Toolsで当該の要素を調べると、CSS部分に！マークなどが出ていることがあります。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。