borderの適応範囲について

Question

borderの範囲について、お聞きしたいことがございます。

 <div class="infomation_box">
    <p class="left_info_box">来院目的</p>
    <p class="right_info_box">初めての来院(初めて〇〇〇動物病院に来院さ…</p>
    <p class="left_info_box">希望日時</p>
    <p id="preffered_date" class="right_info_box">2019年06月15日(土)10時30分</p>
  </div>

.infomation_box{
  text-align:center;
  border: 1px solid orange;
  height:40px;
}
.left_info_box{
  display: inline-block;
  background-color: #ffce75;
  border-right: 1px solid orange;
  width: 165px;
  padding: 3px 10px;
  border-bottom: orange;
  font-weight: bold;
  font-size: 14px;
  line-height: 2.5;
  text-align: right;
  height:34px;
}
.right_info_box{
  display: inline-block;
  font-size: 14px;
  margin-left: 7px;
  margin-right: 21px;
  margin-left: 7px;
  margin-top: 10px;
  margin-bottom: 9px;
}
#preffered_date{
  width:300px;
}
body{
  margin:0;
}
p{
  margin:0;
}
ul{
  list-style:none;
}

コードの実行結果は、以下の画像になります。

お聞きしたい点なのですが、borderが「infomation_box」内の上から２つのpタグの回りにしかついておらず、下２つのpタグが無視されてしまっているような状態になっています。
最終的には、下記画像のようにしたいと考えております。

真ん中のborderに関しては、「infomation_box」内上２つに対して、「border-bottom」を設定することで対処しようと考えていますが、大枠の全体を囲うborderは、「infomation_box」に対して設定した、borderを適応させたいと考えています。
解決法につきまして、ご助言頂ければ幸いです。
よろしくお願いします。

追記です

Answer 1

そもそもtableで組んでも良さそうな内容ですが使用したくない何かしらの理由があるのでしょうか。

コード修正しました

<table class="orangetable">
  <tr><th>来院目的</th><td>初めての来院(初めて〇〇〇動物病院に来院さ…</td></tr>
  <tr><th>希望日時</th><td>2019年06月15日(土)10時30分</td></tr>
</table>

table.orangetable {
  border-collapse: collapse;
  border-spacing: 0;
}

.orangetable th, .orangetable td {
  border: 1px solid orange;
  padding: 3px 10px;
  font-size: 14px;
  height: 34px;
}

.orangetable th {
  background-color: #ffce75;
  width: 165px;
  text-align: right;
}

以下編集前のコード

<table class="orangetable">
  <tr><th>来院目的</th><td>初めての来院(初めて〇〇〇動物病院に来院さ…</td></tr>
  <tr><th>希望日時</th><td>2019年06月15日(土)10時30分</td></tr>
</table>

table.orangetable {
  border-collapse: collapse;
  border-spacing: 0;
}

.orangetable th, .orangetable td {
  border: 1px solid orange;
  padding: 3px 10px;
  font-size: 14px;
  height: 34px;
}

.orangetable th {
  border: 1px solid orange;
  padding: 3px 10px;
  background-color: #ffce75;
  width: 165px;
  text-align: right;
}

.orangetable td {
  margin: 10px 21px 9px 7px;
}

Comments

[toll_tree]

ご回答ありがとうございます。
やはりtableの方が良いですよね...
自分も作りかけてた際にそう思ったのですが、途中からだし、今更...と思ってこのままいってしまおうかなと思ったんですよね...

[dit.]

途中まで作ったし頑張って調整したからこのままやりたい　と思う気持ちはわかります。
が、その先の調整でさらに難航する可能性があるので組みなおした方が早い場合もあります。
（と、書いていて質問履歴を見てみたらtableで組んだ場合の質問されてますね。）

[dit.]

あと、質問に提示のコードに合わせてしまったので.right_info_boxの余白設定がmarginになってますが、tdに指定するならpaddingの方が適切ですね。
thと同じ余白でいいなら`.orangetable td {`以降すべて消して良さそうです。
padding: 3px 10px;もth、td両方で指定したのにthでさらに指定してしまいました。
ちょっと回答のコードなおします。

[toll_tree]

あ、dit.さんどうもです！ｗ
あちらの方でもご回答くださり感謝です！
最初は、このままdivでいこうかなと思ったのですが、自分も先のことを考えた場合を考えてtableで組むことにしましたんですよね。

[toll_tree]

編集頂きありがとうございます。
あれから、多少コードを改変しましたので、自分のコードと照らし合わせてみたいと思います。

[toll_tree]

＞thと同じ余白でいいなら`.orangetable td {`以降すべて消して良さそうです。
こちらなのですが、tdに関しましては、thよりかは幅自体は広く取ろうと考えておりましたので、取り敢えずはtdの指定はそのままで行こうかとおもいます！

[dit.]

余白と幅は違うものなので注意してください。
もう一つの質問の回答に書きましたがクラス分けをしていないtdにwidth: 66px;がついてます。
これのせいでtdが短いので、width: 66px;を付けたいtableにクラスでもつけて区別してください。
これを直すだけでもtdは長くなると思います。
「余白を変えたい」ならmarginではなくpaddingにしてくださいね。
padding: 10px 21px 9px 7px;

思わぬところが影響したりするので、完全に同じ指定にしたいとき以外はtable、tr、th、tdなどへの直接的な指定ではなくidやclassを付けて区別するようにした方がいいです。

[toll_tree]

ご返信ありがとうございます。
クラス分けをしていない「td」部分には、クラスを付けてみてもう一つの質問の問題が解決するか、試してみたいと思います。
承知しました。余白を変える場合はpaddingの設定を変えると肝に銘じたいと思います。

[toll_tree]

クラス名をつけてみましたら、なんと改善しました...
dit.さんのおっしゃる通りクラス名をつけて、今後はきちんと区別していこうと思います！

[dit.]

解決されたようで何よりです。
tdなどに直接スタイルを付ける場合は他のすべてのtdにも影響を与えます。
別途指定しない限りすべてのtdのフォントサイズを同じにしたい　というような場合以外は控えた方がいいですね。

Answer 2

まずHTMLとCSSは現象が再現できるコードを提示しましょう。
提示されたコードだと現象が再現できません。何か足りてない気がします。

再現できないので憶測での回答になりますが
borderをclassではなくclass配下のp要素につけてみてはいかがですか

.infomation_box{
  text-align:center;
  height:40px;
}
.infomation_box p{
  border: 1px solid orange;
}

実際はどうなってるか分かりませんがtext-align:center;も効いてないような気がするので
こっちもp要素に入れるといいかもしれません。

追記やその他回答を受けて

dit.さんが仰るようにtableで組めるのであればそれに越したことはありません。
どうしてもdivで組みたい場合の回答をします。

まず、提示されたコードではdisplay:inline-blockのため
要素が横並びとなり、縦積みにならないので再現しません。
そして、div要素にwidthが設定されていないが、
text-align:centerが効いているため、要素は画面いっぱいなのに（borderも画面いっぱいになる）
テキスト要素のみが中央に寄った状態になり、画面が崩れています。
これは、ブロック要素を動かすのにtext-alignは使えないってやつです。

上記を踏まえて、修正したコードです。

 <div class="infomation_box">
    <p class="left_info_box">来院目的</p>
    <p class="right_info_box">初めての来院(初めて〇〇〇動物病院に来院さ…</p>
</div>
<div class="infomation_box top_border_none">
    <p class="left_info_box">希望日時</p>
    <p id="preffered_date" class="right_info_box">2019年06月15日(土)10時30分</p>
</div>

.infomation_box{
  /*text-align:center;*/
  border: 1px solid orange;
  height:40px;
  width:30%; /*要素の幅を指定する*/
  margin-left:auto;
  margin-right:auto;
}
.top_border_none {
  border-top-style: none;
}
.left_info_box{
  display: inline-block;
  background-color: #ffce75;
  border-right: 1px solid orange;
  width: 165px;
  padding: 3px 10px;
  border-bottom: orange;
  font-weight: bold;
  font-size: 14px;
  line-height: 2.5;
  text-align: right;
  height:34px;
}
.right_info_box{
  display: inline-block;
  font-size: 14px;
  margin-left: 7px;
  margin-right: 21px;
  margin-left: 7px;
  margin-top: 10px;
  margin-bottom: 9px;
}

変更点は、div要素を2個に分ける事で縦積みにしてます。
縦積みにすることで中央のborderが被って濃くなってしまうため
下段div要素に対しborder-top-style: none;を設定することで
borderの被りを無くしています。

div要素を画面中央に配置するために、widthを設定し（ここはあとで調整してください）
marginをautoにすることで要素を画面中央にもってくるようにしました。

Codepenサンプル
[上記コードのサンプルです]

Comments

[toll_tree]

ご回答ありがとうございます。
リセットCSSを適応させていたCSSの方も追記いたしました。

[toll_tree]

「text-align:center;」の方はデベロッパーツールの方で確認しましたが、適応されていました。
提示頂いたコードですと、自分が試した限りでは、うまくいきませんでした...

[mepon]

.infomation_boxに対してtext-align:center;をかけると来院目的と希望日時も
中央揃えになる認識なのですが提示の画像だとなっていないように見えます
これで問題ないのであればそれで大丈夫です。
p要素に対して、cssを追加した結果について追加していただいてもいいですか？

[toll_tree]

すみません。
ちょっとバグが発生してしまい、該当のページを表示することができなくなってしまいました...
こちらのバグが解決し次第CSSの追加結果の方、追記させて頂きます。

[toll_tree]

お待たせして申し訳ないです。
p要素に対して、CSSを追加した結果を追記しました。

[mepon]

回答編集しました。

[toll_tree]

ご丁寧に、追記頂きありがとうございます。
実は、結構時間かけて色々調整したのもあり、またいちから、tableで調整しなければならないと思うと少し、憂鬱な気分がしてしまいまして...
かなり、迷っています...divで組めるならここまできたらご回答頂いたことを踏まえ、divで組んでも良いかなと思ってはいますね...