<input type="text">の横に余白が入ってしまう

前提・実現したいこと

<input type="text">の横に余白が生じてしまう原因を知りたいです。

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

以下のソースコードで実行したとき、class='first-row'のものを1行に並べたいのですが、
なぜかinput要素の横に余白が生じてしまい、3個までしか並べられません。

cssでは、margin: 0;　box-sizing： border-box;としているので、
隙間なく1行に並ぶかと思ったのですが、input要素の横に余白が生じてしまいました。

デベロッパーツールで確認したところ、
ボックスのサイズは親要素の25%のサイズにはなっていますが、余白が生じているようです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>でんたく</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8
9<body>
10  <div class='container'>
11    <div class='wrapper'>
12      <input type='text' class='sum first-row' autofocus>
13      <input type="text" class="number first-row">
14      <select class='first-row'>
15        <option value="1">10円単位</option>
16        <option value="2">100円単位</option>
17        <option value="3" selected>1000円単位</option>
18      </select>
19      <div class='btn first-row'>計算</div>
20    </div>
21    <div class='result'>
22      ここに結果を表示します。
23    </div>
24  </div>
25
26  <!-- <script src='js/main.js'></script> -->
27</body>
28</html>

css
1@charset 'utf-8';
2
3body {
4  font-size: 16px;
5  background-color: #ccc;
6}
7
8.container {
9  margin: 20px auto;
10  width: 400px;
11}
12
13.first-row {
14  /* display: flex; */
15  width: 25%;
16  margin: 0px;
17  border: none;
18  height: 40px;
19  box-sizing: border-box;
20  border-radius: 5px;
21}
22
23.btn {
24  background-color: royalblue;
25  line-height: 40px;
26  text-align: center;
27  color: white;
28}
29
30.result {
31  background-color: white;
32  padding: 10px;
33  border-radius: 5px;
34}

試したこと

widthを25%ではなく、100pxと直接指定してみましたが、うまくいきませんでした。

また、.first-rowに対してdisplay: flex;としてみましたが、各要素が全く並ばなくなってしまいました。（各要素がブロック要素になっている？）

可能であれば、display: flex;としたときの振る舞いの原因に関しても、ご教授いただけると幸いです。

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

ブラウザはChromeを使用しています。
よろしくお願いいたします。

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

回答1件

ベストアンサー

要素と要素の間にある改行がテキストノードとなっているため、スペースを持ちます。コメントアウトしておきましょう。

あと、最後の計算ボタンをdisplay:inline-blockに切り替える必要もあります。

html
1    <div class='wrapper'>
2      <input type='text' class='sum first-row' autofocus><!--
3      --><input type="text" class="number first-row"><!--
4      --><select class='first-row'>
5        <option value="1">10円単位</option>
6        <option value="2">100円単位</option>
7        <option value="3" selected>1000円単位</option>
8      </select><!--
9      --><div class='btn first-row'>計算</div>
10    </div>