回答編集履歴
1
説明の改善
answer
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
> HTMLにて各テキストボックス、各セレクトボックスにクラスを与え
|
|
2
|
+
CSSにてそれぞれに幅、高さを同じpxで指定しましたが
|
|
3
|
+
明らかにセレクトボックスの方が少しだけ小さいです。
|
|
4
|
+
|
|
1
5
|
paddingとborderの既定値がテキストボックスとセレクトボックスでは異なるので同じheightにすると外枠の高さに差がでます。
|
|
2
6
|
|
|
3
7
|
デフォルトではheightにはpaddingとborderは含まれませんので、外枠の高さは、height+上下padding+上下borderになります。
|
|
@@ -23,10 +27,15 @@
|
|
|
23
27
|
[box-sizing - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)
|
|
24
28
|
|
|
25
29
|
|
|
30
|
+
> その次のお客様・欲しいもの列まで行間がかなり空いてしまっています。
|
|
26
|
-
|
|
31
|
+
改行タグを無駄に挟んでいるわけではないのでどうして各行に間が空いてしまうのか分かりません。
|
|
27
32
|
|
|
28
33
|
```css
|
|
29
|
-
|
|
34
|
+
.CustomerGenre {
|
|
30
|
-
|
|
35
|
+
display: inline-block;
|
|
36
|
+
/* height: 100px; これが原因 必要ないので削除*/
|
|
31
37
|
}
|
|
32
|
-
```
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
あと、閉じタグのない`<p>`をあちこちに置いて行間を空けているようですが、このような使い方はHTMLの規定に反してます。
|
|
41
|
+
各要素間の余白はmarginを使って調整してください。
|