前提・実現したいこと
<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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/02/12 03:05