回答編集履歴
2
誤字の修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
`div.top-img`
|
|
1
|
+
`div.top-img`は`height: 600px;`と指定しているとおりだし、`img`も画像サイズどおりだし、`height`はおそらくデフォルトで`height: auto;`になっていて、中身（`img`）の高さ＋何か（マージンか何か）になっているのだろうから、何もおかしくないですね。
|
|
2
2
|
|
|
3
3
|
これに続くブロックは`div.top-img`の下にレイアウトされますから画像と重なることになってしまいます。
|
|
4
4
|
|
1
追記
answer
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
`div.top-img`には`height: 600px;`を指定しているとおりだし、`img`も画像サイズどおりだし、`height`はおそらくデフォルトで`height: auto;`になっているのだろうから、中身（`img`）の高さ＋何か（マージンか何か）になっているのだろうから、何もおかしくないですね。
|
|
2
2
|
|
|
3
|
+
これに続くブロックは`div.top-img`の下にレイアウトされますから画像と重なることになってしまいます。
|
|
4
|
+
|
|
3
5
|
`div.top-img`にも`height: auto;`を設定すれば中身の要素の高さになるはずです。
|
|
4
6
|
|
|
5
7
|
逆に、`fighre`に`height: 100%;`を設定すれば`figure`の高さは`div.top-img`と同じ600pxになり、さらに`.top-img img`に`height: 100%;`を設定すれば画像の高さも600pxになるはずです。
|