できてしまった余白をなくしたい

いつもとても速い返信ありがとうございます！

画面の下のほうにたくさんの余白ができてしまったので、
どうにかして消したいです。どうすればいいでしょうか？

コードの文字数がとても多くなってしまったため、
こちらのurlに張らせていただきます。

こちらになります

現在、こちらのサイトの模写をさせていただいています。

参考サイトです

こうなってしまったことについて、原因と自分の考察

原因はおそらく、divタグをたくさん使い、
そのあとposition:relativeを使って自分の置きたいところに
そのdivのものを持って行ったことがなにかしらの
影響をあたえたのではないのかと思っています。

とてもあいまいな考察ですいません。
超初心者なので、簡単なミスでしたらすいません！
一時間悩みました。

azuapricot

2019/11/15 07:30

position:relative を使ってしまっているので、元要素の実際の位置は移動せず元要素分高さが残ってしまってる状態ですねー

azuapricot

2019/11/15 07:32

模写っていいつつ模写してないんですね？実際のサイトposition:relativeなんて使ってなくないですか？

hayashi_naoki

2019/11/15 07:36

たしかにそうですね… もう一度開発者ツールで作り方の確認します！

mutsuki22

2019/11/15 07:41 編集

コードからじゃなくて見た目から自分なりって事ことじゃないですか？でもこれを直すのは・・・ちょっと労力入りますね。

azuapricot

2019/11/15 07:47

position:relative 多用　ﾖｸﾅｲ

行動規範の内容に同意します

回答2件

ベストアンサー

全体的にざっとみてみましたがこれを治すのは無理だと思います
HTMLの構造が正しいなら、CSSは一からつけ直したほうがよいです

とくにtopにマイナスを多用していますが、良いこと無いので
使わないようにしてください

投稿2019/11/15 07:38

yambejp

総合スコア116694

hayashi_naoki

2019/11/15 07:40

その通りですね… 今回は、自分でアレンジをしすぎたのが問題でした… もっと開発者ツールをよく使って、一から作り直します！解答していただき、ありがとうございました！

行動規範の内容に同意します

模写っていいつつ模写してないのが原因です

サイトのコード

HTML
1<div class="footer">
2	<div class="footer_left">
3		<img class="footer_left_img" src="https://sophia-net.com/wp/wp-content/themes/traveltour181116/img_new/footer_logo.png">
4		<p>
5			私たちソフィアはイラン・中央アジアのオーダーメイド旅行専門会社です。決められた日程の旅行では”ワガママ”ができません。お客様だけの”オーダーメイド旅行”を作ることを全力でサポートいたします。
6		</p>
7	</div>
8	<div class="footer_right">
9		<p class="footer_right_name">
10			ソフィア株式会社
11		</p>
12		<p class="footer_right_txt">
13			東京都知事登録旅行業　 第3-4240号<br>
14			一般社団法人全国旅行業協会　正会員<br>
15			東京都弁護士協同組合　特約店<br>
16			<br>
17			〒169-0072<br>
18			東京都新宿区大久保1-1-45<br>
19			tel:03-5292-7858 fax:03-5272-6020<br>
20		</p>
21	</div>
22</div>

CSS
1.footer {
2    align-items: center;
3    display: flex; /* Flexで横並び実現してる */
4    margin-top: 20px;
5    vertical-align: middle;
6    justify-content: center; /* 中央寄せ */
7}
8
9.footer_left {
10    display: inline-block;
11    flex-direction: row;
12    margin: 0 60px 0 0;
13    width: 500px;
14    justify-content:center;
15}
16
17.footer_right {
18    border-left: 1px solid #a0a0a0;
19    display: inline-block;
20    letter-spacing: 0;
21    margin: 0 0 20px 0;
22    padding: 40px 0 40px 60px;
23    width: 340px;
24}
25

質問者さんのコード

HTML
1<bottom>
2     <div class="img8">
3          <img src="https://dl.dropbox.com/s/xb45i727tr7t8z0/footer_logo.png?dl=0">
4     </div>
5     <div class="saito">
6          <p>私たちソフィアはイラン・中央アジアのオーダーメイド旅行専門会社です。
7             決められた日程の旅行では”ワガママ”ができません。
8             お客様だけの”オーダーメイド旅行”を作ることを全力でサポートいたします。</p>
9     </div>
10     <div class="footeraba">
11          <h3>ソフィア株式会社</h3>
12
13          <p>東京都知事登録旅行業　 第3-4240号<br>
14             一般社団法人全国旅行業協会　正会員<br>
15             東京都弁護士協同組合　特約店<br><br>
16                        
17             〒169-0072<br>
18             東京都新宿区大久保1-1-45<br>
19             tel:03-5292-7858 fax:03-5272-6020</p>
20     </div>
21</bottom>

CSS
1
2/* position:relative を多用しすぎ */
3bottom .footeraba p{
4    width:300px;
5    height:130px;
6    position:relative;
7    top:-250px;
8    left:420px;
9    line-height:1.7rem;
10    padding:30px;
11    margin:0px;
12    border-left:1px solid black;
13}
14
15h3{
16    position:relative;
17    width:160px;
18    height:30px;
19    top:-245px;
20    left:420px;
21    padding:30px;
22    margin:0px;
23    padding-bottom:0px;
24    border-left:1px solid black;
25}
26
27.footeraba{
28    position:relative;
29    top:-500px;
30    left:400px;
31    width:100px;
32}
33
34.saito p{
35    width:300px;
36    height:300px;
37    position:relative;
38    top:-330px;
39    left:400px;
40    padding:30px;
41}