隙間が埋まらない (css)

概要

1.showページにボタンを縦に並ばせています。

2.ログアウト時のボタンはきれいに並んでいます。

3.ログイン時のボタンの並びはお気に入りボタンの上下に隙間があります。

4.positionやmargin,paddingなどで隙間を埋めてみたがお気に入りボタンをクリックした後に表示されるお気に入り解除ボタンがずれる

5.ボタン同士の隙間を探してみたが、どこの要素の隙間なのかが分からなかった。

6.ログアウト時とログイン時のボタン箇所のコードは少し違う

実現したいこと

1.ボタンの間にある隙間を埋めて縦に並べたい

発生している問題・エラーメッセージ

・ログアウト時

。ログイン時

該当のソースコード

コンパイル後のshow.html

plans/show.html/ボタン箇所
1<div class="container">
2            <div class='plan-content'>
3      <div class="plan-header">
4        <div class="plan-user"><h3><a href="/users/1">株式会社テスト</a></h3></div>
5        <div class="plan-time"><p>掲載期間：2022年10月17日～2022年11月01日</p></div>
6      </div>
7      <div class="plan-title">
8        <h4>～企画内容～</h4>
9        <div class="plan-title-name"><h5>テスト44a</h5></div>
10      </div>
11      <div class="plan-overview">
12        <div class="plan-photo"><p><img alt="企画書イメージ図" src="/uploads/plan/photo/4/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg" /></p></div>
13        <div class="plan-detail">
14          <h4>企画概要</h4>
15          <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
16<br />bvbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
17<br />cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
18        </div>
19      </div>
20      <div class="sub-plan-content">
21        <div class= "plan-conditions">
22          <h4>希望条件</h4>
23          <p class="plan-show-conditions">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiddddddddddddddddddllllllllllssssssss
24<br />cccccccccckkkkkkkkkkksss
25<br />dddddddddk ccccccss</p>
26        </div>
27        <div class= "plan-number">
28          <h4>電話番号</h4>
29          <p>00000000000</p>
30        </div>
31        <div class= "plan-address">
32          <h4>所在地</h4>
33          <div class="plan-adress-overview">
34            <p>〒0000000</p><br />
35            <p class="adress-content">東京都渋谷区〇〇町00-000-00 テストビル〇階〇号室</p>
36          </div>
37        </div>
38      </div>
39      <div class="plan-content-btn">
40        <div class="plan-favorite-btn">
41          <p>   <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw" autocomplete="off" />
42    <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" />
43      <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg" data-disable-with="お気に入り" />
44</form>      </div>
45</p> 
46        </div>
47          　
48              <form class="new_room" id="new_room" action="/rooms" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="kSUvQAhDQZf3W8N63RY9jDnghV8Pu-_rPU9S6LaMWxrIPE6bZaNDlqQpEE0SvWK9TIiJMUMYKsAIJBuHGQx1Fg" autocomplete="off" />
49                
50                  <input value="4" autocomplete="off" type="hidden" name="entry[plan_id]" id="entry_plan_id" />
51                  <input value="1" autocomplete="off" type="hidden" name="entry[user_id]" id="entry_user_id" />
52                <div class="plan-entry-btn">
53                  <input type="submit" name="commit" value="応募" class="btn btn-outline-danger btn-lg" data-disable-with="応募" />
54                </div>
55</form>        <div class="plan-content-btn">
56          <a class="btn btn-outline-danger btn-lg" href="https://f3c5ff7c750c474ba358523266e7506d.vfs.cloud9.ap-northeast-1.amazonaws.com/">戻る</a>
57        </div>
58      </div>
59    </div>

plan.scss/plans/show.html.erb箇所
1.plan-content{
2    border-radius: 20px;
3    height: auto;
4	margin-left: calc(-50vw + 50%);
5    width: 100vw;
6    
7    //企画掲載ページヘッダー箇所
8    .plan-header{
9        margin-bottom: 30px;
10        border-bottom: solid 1px silver;
11        height: 60px;
12        .plan-user{
13            text-align: left;
14            font-family: Arial;
15            
16            .plan-user h3 {
17                width: 50%;
18                font-size: 20px;
19            }
20            a {
21                color: black;
22                text-decoration: none;
23                position: relative;
24                left: 50px;
25            }
26            a:hover{
27                color: silver;
28            }
29            
30        }
31        .plan-time{
32            width: 100%;
33            text-align: right;
34            font-size: 12px;
35            position:relative;
36            bottom: 10px;
37            right: 40px;
38        }
39    }
40    
41    .plan-title{
42        margin-top: 10px;
43        margin-bottom: 10px;
44        text-align: center;
45        word-wrap: break-word;
46        
47        .plan-title-name{
48            height: 60px;
49            margin-top: 20px;
50        }
51    }
52    .plan-overview{
53        border-top: solid 1px silver;
54        border-bottom: solid 1px silver;
55        padding: 20px;
56        display:flex;
57        margin-left: auto;
58        margin-right: auto;
59        width: 95%;
60        .plan-photo{
61            padding-right: 50px;
62        }
63        .plan-detail{
64            font-size: 20px;
65            width: 73%;
66            word-wrap: break-word;
67        }
68    }
69    .sub-plan-content{
70        margin-left: 50px;
71        border-bottom: solid 1px silver;
72        width: 73%;
73        
74        .plan-conditions{
75            height: auto;
76            padding-top: 20px;
77            margin-bottom: 20px;
78            display:flex;
79            h4{
80                width: 50%;
81                padding-right: 2%;
82            }
83            .plan-show-conditions{ 
84                width: 72%;
85                word-wrap: break-word;
86            }
87        }
88        
89        .plan-number{
90            padding-top: 40px;
91            margin-bottom: 20px;
92            display:flex;
93            h4{
94                padding-right: 19%;;
95            }
96            p{
97            }
98            
99        }
100        
101        .plan-address{
102            height: auto;
103            padding-top: 20px;
104            margin-bottom: 40px;
105            word-wrap: break-word;
106            display:flex;
107            h4{
108                padding-right: 22%;
109            }
110            .plan-adress-overview{
111            }
112            .adress-content{
113            }
114        }
115    }
116    
117    .plan-content-btn a{
118      display: block;
119    }
120    .plan-favorite-btn input{
121      width: 100%;
122    }
123    .plan-entry-btn input{
124      width: 100%;
125    }
126    
127    .finish-text{
128        padding: 15px;
129        margin-left: calc(-50vw + 50%);
130        width: 100vw;
131        text-align: center;
132        background-color: silver;
133        margin-top: -25px;
134        margin-bottom: 25px;
135    }
136}

試したこと

marginやpadding,positionで埋めてみたが、お気に入りボタンがクリック後ずれる

文書が拙かったり、まかせっきりに見えた文章でしたら、コメントで指摘していただいたら
修正させていただきます。

!現在の状態

hatena19

2022/10/17 11:00

erbではなく、コンパイル後のHTMLコードを提示した方が回答が付きやすいと思います。

退会済みユーザー

2022/10/17 11:23

コンパイル後のHTMLコードをコピーして貼り付けたのですが、コードの並びがいびつになってしまいました。誠に申し訳ありません。

hatena19

2022/10/17 12:46

提示のHTMLとSCSSでは、画像のような表示を再現できません。 SCSSのセレクターのiクラスがHTMLにはありません。こちらでも再現できるコードを提示してもらわないと、回答は不可能です。

退会済みユーザー

2022/10/17 13:17

コードを更新したのですが、再現できるコードになっていますでしょうか？

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

回答1件

ベストアンサー

下記の<form class="new_room" の前の行内に全角空白があります。これを削除したらどうでしょうか。

html
1        </div>
2          　
3              <form class="new_room" id="new_room" action="/rooms" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="kSUvQAhDQZf3W8N63RY9jDnghV8Pu-_rPU9S6LaMWxrIPE6bZaNDlqQpEE0SvWK9TIiJMUMYKsAIJBuHGQx1Fg" autocomplete="off" />

追記

html
1      <div class="plan-content-btn">
2        <div class="plan-favorite-btn">
3          <p>   <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw" autocomplete="off" />
4    <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" />
5      <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg" data-disable-with="お気に入り" />
6</form>      </div>
7</p> 
8        </div>

上記の部分ですが、整形されていないのでわかりにくいですが、整形すると、下記のようになります。
コメントをいれた<p>と</p>の対応ができてないので、ブラウザが開始タグと終了タグを補っていて、それが余白になっているようです。

html
1        <div class="plan-content-btn">
2            <div class="plan-favorite-btn">
3                <p>  <!-- ココ -->
4                <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden"
5                        name="authenticity_token"
6                        value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw"
7                        autocomplete="off" />
8                    <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" />
9                    <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg"
10                        data-disable-with="お気に入り" />
11                </form>
12            </div>
13            </p>  <!-- ココ -->
14        </div>