テキストボックスとセレクトボックスを同じ大きさにしたい、行間を詰めたい。配置

Question

前提・実現したいこと

プログラミング初心者です。
テキストボックスとセレクトボックスを同じ大きさに揃えたいです。
また、各行の間隔を詰めてきれいに揃えたいです。

HTMLにて各テキストボックス、各セレクトボックスにクラスを与え
CSSにてそれぞれに幅、高さを同じpxで指定しましたが
明らかにセレクトボックスの方が少しだけ小さいです。

テキストボックスとセレクトボックスが横並びの配置で、
お客様ID・ジャンルが一列となります。
その次のお客様・欲しいもの列まで行間がかなり空いてしまっています。
改行タグを無駄に挟んでいるわけではないのでどうして各行に間が空いてしまうのか分かりません。

配置という点で、2つの質問を同時にさせていただきました。
どちらか片方でもご回答いただけますと嬉しいです。

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

エラーはありません。

該当のソースコード

HTML

<p> <div class=CustomerID> お客様ID<br> <input type="text" name="CustomerID" class="CustomerID-large"> </div> <div class=CustomerGenre> ジャンル<br> <select name="CustomerGenre" class="CustomerGenre-large"> <option value="10dai30dai">10~30代</option> <option value="another">その他</option>

		</select>
	</div>

	<p>
	<div class=CustomerName>
		お客様名前<br> <input type="text" name="CustomerName"
			class="CustomerName-large">
	</div>

	<div class=Customerwanted>
		<p>
			欲しいもの<br> <select name="Customerwanted>"
				class="Customerwanted-large">
				<option value="book">本</option>
				<option value="music">CD</option>
			</select>
	</div>

	<p>
	<div class=CustomerSale>
		<p>
			金額<br> <input type="text" name="CustomerSale"
				class="CustomerSale-large">
	</div>


	<div class=productStock>
		<p>
			在庫数<br> <input type="text" name="productStock"
				class="productStock-large">
	</div>

CSS

.CustomerID {
display: inline-block;
}
.CustomerID-large {
width: 160px;
height: 25px;
}

.CustomerGenre {
display: inline-block;
height: 100px;
}

.CustomerGenre-large {
width: 180px;
height: 30px;
}

.CustomerName {
display: inline-block;
}

.CustomerName-large{
width: 160px;
height: 25px;
}

試したこと

HTMLにて各テキストボックス、各セレクトボックスにクラスを与え
CSSにてそれぞれに幅、高さを同じpxで指定しました。

先輩からアドバイスをいただき、
同じ「くらい」に見えるようにセレクトボックスへのCSSを
テキストボックスに比べて5px～10px大きく指定してみました。
同じ大きさくらいには見えるのですが、ドラッグをするとずれているのが分かってしまいます。

行間を詰めるために<p>タグや<br>タグを削除しましたが、同じ行になってほしくないテキストボックスまでが
同じ行になってしまいました。
CSSの各クラスにてline-height:0を記述しましたが配置に変化はありませんでした。

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

ここにより詳細な情報を記載してください。

Answer 1

HTMLにて各テキストボックス、各セレクトボックスにクラスを与え

CSSにてそれぞれに幅、高さを同じpxで指定しましたが
明らかにセレクトボックスの方が少しだけ小さいです。

paddingとborderの既定値がテキストボックスとセレクトボックスでは異なるので同じheightにすると外枠の高さに差がでます。

デフォルトではheightにはpaddingとborderは含まれませんので、外枠の高さは、height+上下padding+上下borderになります。

box-sizing: border-box;を設定するとheightはpaddingとborderを含んだものにできますので、外枠の高さ=heightになります。

.CustomerID-large {
  width: 160px;
  height: 30px;
  box-sizing: border-box;
}

.CustomerGenre-large {
  width: 180px;
  height: 30px;
  box-sizing: border-box;
}

とすれば、テキストボックスもセレクトボックスも高さ30pxで揃います。

box-sizing - CSS: カスケーディングスタイルシート | MDN

その次のお客様・欲しいもの列まで行間がかなり空いてしまっています。

改行タグを無駄に挟んでいるわけではないのでどうして各行に間が空いてしまうのか分かりません。

 .CustomerGenre {
  display: inline-block;
/*  height: 100px;  これが原因 必要ないので削除*/
}

あと、閉じタグのない<p>をあちこちに置いて行間を空けているようですが、このような使い方はHTMLの規定に反してます。
各要素間の余白はmarginを使って調整してください。

Comments

[nekonohi]

ご返答誠にありがとうございます。テキストボックスとセレクトボックスにそのような違いがあることを知りませんでした。box-sizing: border-box;を設定し、同じ大きさにすることができました。
他のボックスを使用する際も教えていただいたことを意識してみたいと思います。
また、その他内容までご指摘いただきまして本当にありがとうございます。

[hatena19]

* {
box-sizing: border-box;
}
というように全称セレクターですべての要素にbox-sizing: border-box;を設定しておいてサイズの計算法を統一しておくのもお勧めです。

[nekonohi]

全称セレクターも初めて聞きました…！
使う場合の記述位置はどのあたりになるのでしょうか？
上の方で宣言するようなものということでしょうか。
みなさま臨機応変に使われているかと思うので愚問でしたら申し訳ありません。

[hatena19]

一番先頭に記述するのがいいでしょう。
あと、
border: 0;
padding: 0;
なんかも入れておいてもいいですね。
「リセットCSS」というキーワードを調べてみるのもお勧めします。

[nekonohi]

hatena19さん本当に懇切丁寧にありがとうございます。
初めての質問でこんなに親切にしていただけで嬉しいです。
知らないことしかない状態ですが、またお世話になる時はどうぞよろしくお願い致します。

Answer 2

まず、以下の変更をすると、

その次のお客様・欲しいもの列まで行間がかなり空いてしまっています。

これが解決します。

.CustomerGenre {
display: inline-block;
height: 100px;
}

↓

.CustomerGenre {
display: inline-block;
height: 0px;
}

Comments

[firegrape]

あとは、欲しいもののセレクトボックスを大きくする方法は

<select name="Customerwanted>" class="Customerwanted-large">

↓

<select name="Customerwanted" class="CustomerGenre-large">

これです。

[nekonohi]

ご返答誠にありがとうございます。
教えていただいた通り、無駄な記述を削除したところ行間が少し狭まりました。
たくさんのご指摘、本当にありがとうございます。自分でしっかり見直す癖も付けたいと思います。