borderの長さを微調整したい

Question

前提・実現したいこと

borderの長さを微調整したいです。
具体的には、下記画像のようにできればなと考えております。

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

下記画像におきまして、「10:00」の横のborderの長さを微妙になのですが、上に長くしたいです。
画像は拡大可能ですので、ご確認頂けたらと思うのですがborderが微妙に上のborderに届いていません。

該当のソースコード

 <div class="reserve_time_list">
      <div class="reserve_time_block flex">

        <div class="reserve_status_left reserve_status">
        <p>10:00</p>
                    <form action="/reserve/infomation" method="post">
            <input type="hidden" name="_token" value="KHhCnasV3mMYEnTDD0mejYMddjjvJik6sbBgfHqG">
            <input type="hidden" name="time" type="submit" value="10:00">
            <input type="hidden" name="date" type="submit" value="">
            <input type="hidden" name="dayOfWeek" type="submit" value="">
            <input class="calendar_button" type="submit" value="〇">
          </form>
                  </div>
        <div class="reserve_right reserve_status">
          <p>10:30</p>
                    <form action="/reserve/infomation" method="post">
            <input type="hidden" name="_token" value="KHhCnasV3mMYEnTDD0mejYMddjjvJik6sbBgfHqG">
            <input type="hidden" type="submit" value="10:30">
            
            <input class="calendar_button" type="submit" value="〇">
          </form>
                  </div>
      </div>
      
  </div>

.body{
  margin:0;
}
p{
  margin:0;
}
ul{
  list-style:none;
}
.reserve_time_list p{
  display:inline-block;
  
}
.reserve_status{
  border: 1px solid orange;
  margin-top:20px;
}
.reserve_status_left{
  margin-right:30px;
}
.reserve_status p{
  display:inline-block;
  border-right: 1px solid orange;
  height: 90%;
  padding-top: 3px;


}
.reserve_status form{
  display:inline-block;
}

.flex{
  display: flex;
}
.calendar_button:hover{
  background:none;
  background:linear-gradient(to bottom,#d3d2d2,silver 50%,#afafaf);
  
}

.calendar_button{
  background:linear-gradient(to bottom,#f3f3f3,#e2e2e2 50%,#d1d1d1);
  background-color:#d1d1d1;
  width: 53px;
  height: 31px;
  border: 1px solid silver;
  border-radius:3px;
  margin-left:6px;
  color:#6ea1ff;
  margin-bottom:3px;

}

補足情報（FW/ツールのバージョンなど）

windows10

Comments

[kei344]

出力されたHTMLと、状況が再現できるだけのCSSを提示してください。

[toll_tree]

出力されたHTMl及びCSSの実行結果は、画像にて、貼らせて頂いているのですがそれ以外の別の何かということでしょうか...?

[kei344]

HTMLのコードです。CSSも提示のものだけでは状況が再現されませんでした。

[toll_tree]

すみません。今、CSSの方追記しました。
HTMLの方に関しましては、掲載した部分のみで作成をしているのですが、どの部分が足りていない感じでしょうか...?

[kei344]

提示されているのは なんらかのテンプレートでHTMLではありません。特定環境でのみ出力できる物ではなく、出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。また、CSSはデフォルトのCSS以外のリセットCSSのような物が使われているはずです。（例えばp要素にはmarginがデフォルトで付いているため画像の状況になりません）そういったほかのCSSが有る場合、回答者の回答がご自身の環境では適用されない可能性があり、無駄なやり取りが発生して解決に時間がかかる可能性があります。

[toll_tree]

そういうことだったのですね...
HTML及びCSSを修正しました...

Answer 1

.reserve_status form が inline-block なのでブラウザによっては上下に空間が出ています。
（ 動くサンプル：https://jsfiddle.net/y31dwobp/）

<div class="reserve_status_left reserve_status flex"> とすればとりあえずその状況は解消できるでしょう。
（ 動くサンプル：https://jsfiddle.net/d5kyec19/）

---

本件とは関係ないですが、<input type="hidden" name="date" type="submit" value="">のようにtype属性が2つ付いています。HTMLの文法的に問題なので、修正されることをお勧めします。

Comments

[toll_tree]

ご回答ありがとうございます。
確かに、ご回答に添付頂きましたjsfiddleでは解決できているのですが、自分のブラウザ(google chrome)では、何故かborderが上側に届いておらず、未だ空白ができてしまっています...

[toll_tree]

補足頂きました、type属性の部分修正いたしました。わざわざ教えて頂きありがとうございます。

[toll_tree]

今、思ったのですが、flexで横並びにするとなりますと、「reserve_status」のpタグ及びformに設定していた、「display:inline-block」は必要ないですし、取ってしまっても良いかもしれませんね...

[kei344]

> 何故かborderが上側に届いておらず、未だ空白ができてしまっています...
「 flex」の追加は2箇所ですが、それを入れても問題が起こるようであれば、再現するHTML/CSSを提示してください。

[toll_tree]

返信ありがとうございます。
現状ですと以下の２つにflexを設定しております。
<div class="reserve_status_left reserve_status flex">
<div class="reserve_right reserve_status flex">
今、MicrosoftEdgeの方で表示させてみましたら、きちんとborderは上側に届いていました...
ブラウザの表示の問題なのですかね...?

[kei344]

ベストアンサーが付いていますが、何か状況が変わったのでしょうか。

[toll_tree]

あ、いえ...
ご回答頂いていたので、ベストアンサーにさせて頂かないのはダメかなと思いまして...

[toll_tree]

それに、googlechrome以外では、正常に表示されていますし、一応は解決したのかなと...

[kei344]

そう書いていただけなければこちらにはわかりませんので、ベストアンサーをつける際には一言かかれることをお勧めします。

Chromeは比較的システムの更新サイクルが早いので表示崩れがおきにくいのですが、文法的に間違った箇所がHTML内にあるとそれが影響して表示が崩れることはあります。（文法がおかしいところの表示方法はブラウザによって違うことが多いです）
PHPなどで出力する前に、HTML/CSSでまずレイアウトを組んでみて、問題ないレベルになってからPHPで出力するようにされたほうが問題の切り分けがしやすいですよ。

[toll_tree]

どうしても、手間といった部分で最初からPHPを出力するコードを書いてしまいたくなってしまうんですよね...
ですが、問題切り分けの面では確かに、HTML/CSSで組んでからの方が良いですよね...