要素間の空白を取り除きたいです

Question

要素間の空白を取り除きたいです。
コードなのですが、レイアウトも含めご覧頂いた方が分かりやすいと思い、全コードはコードペンの方に、上げさせていただきました。
コードペンのリンクになります
下記は該当のコードになります

				<div class="img_bottom_index display_flex">
									<div class="index_name_box">
										<h1>
											<span class="salon_shop_name">Been センター北店</span>
											<span class="salon_index_furi">ビーズ　センターキタ</span>
										</h1>
										<p class="index_salon_address">神奈川県横浜市都筑区中川中央2-7-1 港北MINAMO　　2F</p>
									</div>
									<div class="inquiry_box">
										<a class="salon_tel">
											045-592-9985
										</a>
										<a class="salon_reserve">
											WEB予約
										</a>
									</div>
									
								</div>
            </div>
             <div class="back_slide_wrapper">
                <div class="back_animation back_animation_1">
                    <img src="img/shop_img1.webp">
                </div>
                <div class="back_animation back_animation_2">
                    <img src="img/shop_img2.webp">
                </div>
                <div class="back_animation back_animation_3">
                    <img src="img/shop_img3.webp">
                </div>
						</div>
						
						
				</div>
				
				<div class="item_list_box">
					<ul class="item_list">
						<li>ホーム</li>
						<li>クーポン・メニュー</li>
						<li>スタッフ</li>
						<li>ヘアカタログ</li>
						<li>ブログ</li>
						<li>口コミ</li>
					</ul>
				</div>

.img_bottom_index{
    width:1280px;
    margin:0 auto;
    background-color:rgba(255,255,255,0.6);
    position:absolute;
    z-index:2000;
    bottom:0;
}
.salon_shop_name{

    font-size:24px;
    font-weight:bold;

}
.salon_index_furi{
    font-size:12px;
    font-weight:400;
}
.index_name_box{
    margin-left:150px;
}
.index_salon_address{
    margin-top:0;
    margin-bottom:40px;
    font-size:12px;
}
.index_name_box h1{
    margin-bottom:10px;
    width:500px;
}
.salon_tel{
    background-color:#fff;
    margin-right:17px;
    
}
.inquiry_box{
    display:flex;
    height:80px;
    margin-top:25px;
    font-size:25px;
}
.inquiry_box a {
    
    padding:9px;
    border-radius:5px;
    box-shadow:0 4px #ccc;
    width:240px;
    display:flex;
    justify-content: center;
    align-items:center;
    height:40px;
}
.salon_tel::after{
    background-image:url(img/common_sprite.png);

}
.salon_reserve{
    background-color:#f99;
    padding:9px;
    color:#fff;
}
.item_list_box{
    background-color:#ccc;
    
}
.item_list{
    margin-top:0;
    display:flex;
    justify-content:center;
    border-left:black;
    list-style:none;
}
.item_list{
    width:
}

具体的には、「item_list_box」と「img_bottom_index」の間にある、空白を消し、上に詰めたいと考えております。
しかし、現状、「item_list_box」と「img_bottom_index」の間の空白部分が「img_bottom_index」の幅に含まれてしまっており、「item_list_box」のmarginを消しても上に詰めることができません。
以下の画像は、「img_bottom_index」の領域になります。

どなたか、ご解決方法を教えて頂けましたら、幸いです。
※追記です
「.index_salon_address」のmargin-bottomを取り除いたのですが、「item_list_box」との間の空白は詰められず、「img_bottom_index」の中身のみが、下にずれるといった形になってしまいました。

以下の画像は、「img_bottom_index」にmargin-bottom」を-40pxつけた際の画像になります。

Answer 1

img_bottom_indexの子孫要素に大きなマージンを持っている要素がありましたので、その影響だと思います。

.index_salon_address{
  margin-bottom:0px;
}

コメントを受けて追記

その背景画像のようなものがcodepenでは見えないので、正直どこまで下げればいいのか分かりませんが、inquiry_boxに高さがついていますので、そちらを0にしてみては？

.inquiry_box{
  height:0px;
}

さらに追記

item_list_boxは関係ありませんでした。スライドの画像を上にずらしているだけです。

.slide_animation {
	animation-name: slide;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	opacity: 1;
	position: absolute;
	top: -16px; 　　　　　　　　　　　//←これが原因
	height: 100%;
}

これを削除すると、今度は上に隙間が開くのでしょうから、どのように直すのかはお任せします。

さらに追記に追記

これを削除すると、今度は上に隙間が開く

これについてはtop_navi_listにデフォルトのマージンがついていることが原因かもしれません。リセットCSSを使えば、問題ないかもですね。
直書きするなら、こう。

.top_navi_list {
	margin-bottom: 0px;
}
.slide_animation {
	top: 0px;
}

Comments

[newyee]

ご回答ありがとうございます。
「.index_salon_address」のmargin-bottomを０にしたのですが、空白は詰められませんでした。
「.index_salon_address」のmarginを取り除いた際の画像の方を、質問本文の方に、追加で添付させていただきますので、チェック頂けたら幸いです。

[newyee]

追記させていただきました。

[colling]

Code Pen 上で指摘の部分を変えたら、ちゃんと上に移動しましたけど、、。

[Lhankor_Mhy]

回答に追記しました。

[newyee]

ありがとうございます。
yambejpさんからのご回答もあったので、そちらもためさせて頂いたのですが、追記頂きました「.inquiry_box」のheightを「0」にした際とほとんど同じようなレイアウトとなりました。
質問本文に追記しました、画像のように「img_bottom_index」内の要素が「item_list_box」に被さるといったような感じになってしまうんですよね...

[Lhankor_Mhy]

回答に追記しました。

[newyee]

ご回答頂いた通りでした...
topプロパティを消してしまうと、上に間があいてしまいますし、悩む所ですね...

[Lhankor_Mhy]

追記にさらに追記しました。
リセットCSSをせずにアドホックで対応した結果、余計に訳がわからないことになった、という印象を受けました。

[newyee]

全て修正完了しました。助かりました。ありがとうございました。
リセットCSSに関してなのですが、自分は良くわからなかったので「normalize.css」というのを入れていたのですが、まだ自分は学生で勉強段階ではあるのですが、正直、もう全部最初から、デフォルトでついているmarginやpaddingを取っ払ってしまう、ようなものがいいのではないかと思ったりしています...

[newyee]

今回、「top_navi_list」についている、marginを忘れてしまっていたのか、「.slide_animation」にtopプロパティで位置を詰めてしまい、結果的に後々、空白ができてしまい、弊害になってしまいましたからね...
まぁ僕がもっと気をつけていれば、良かっただけの話かもしれませんけどね...

[Lhankor_Mhy]

ご解決されて何よりです。
normalize.css とリセットCSSの選択は悩ましいところですが、個人的にはリセットしてしまう方が分かりやすくて好きですね。

Answer 2

他の方の回答にもある通りですが
.img_bottom_indexと.item_list_boxに隙間は存在しません。
動きとしては全て正しいです
該当の空白部分は.img_bottom_indexの要素の高さに対して
背景画像が小さいためにできてしまっている部分です。

ご自身の環境なら画像サイズが分かると思います
背景画像の縦サイズと同じ値を
.img_bottom_indexに対しheightを追加してみてください。

Answer 3

.img_bottom_indexに適当な色をつけるとわかりますが.item_list_boxとの間には空間はアイていません
単に.img_bottom_indexの高さが高いようです

むりやり近づけるなら

.img_bottom_index{
    margin-bottom:-40px;
 }

のような属性を追加すれば上に寄ってきます

Comments

[newyee]

ご回答ありがとうございます。
ご回答頂いた、コードを追記してみましたら、近づいたのですが、どのように表現して良いのか分からないのですが、白の部分を通過して、下に近づいたといった感じになります。
なんといったら良いのか分からないので、画像の方、追記したいと思います。

[newyee]

追記させて頂きました。
該当の要素間の空白部分を通り越し、「item_list_box」の上に被さるといった状態です。

[newyee]

コードの方を見直してみたのですが、.img_bottom_indexに「position:absolute」を設定しているのですが、それが関係していたりはするでしょうか...?