divを上の行に近づけないと、余白があるように見えますか？

Question

私はこのコードについていくつか質問があります。

1. 最初のinputtxtクラス要素は、単純なインラインブロック表示です。最後の2つのinputtxtクラス要素は入力テキストフィールドです。彼らはなぜ異なっているのですか？入力テキストフィールドにデフォルトのパディングがありますか？灰色のdivを参照する縦線が異なるのはなぜですか？
2. すべてのinputtxtクラスの要素には、前後の行との上下のギャップ距離があります。どうして？

ありがとうございました！

.remind{ 
 
     float: left; 
 
     width: 80px; 
 
     height: 40px; 
 
     background-color: #cccccc; 
 
     border: 1px solid black; 
 
} 
 

 
.inputtxt{ 
 
     display: inline-block; 
 
     width: 200px; 
 
     height: 12px; 
 
     border-radius: 5px; 
 
     border: 1px solid #999999; 
 
    } 
 

 
    
 

<div class="formitm"> 
 
     <div class="remind"></div> 
 
     <div class="inputtxt"></div> 
 
    </div> 
 
    <div class="formitm"> 
 
     <div class="remind"></div> 
 
     <input type="text" class="inputtxt"/> 
 
    </div> 
 
    <div class="formitm"> 
 
     <div class="remind"></div> 
 
     <input type="text" class="inputtxt"/> 
 
    </div>

Answer 1

のdivの高さは、ブラウザが設定行の高さに基づいて、次の要素をフィットのdiv line-heightよりも小さい場合には、あなたの.inputtxt

padding: 0; vertical-align: top;

Answer 2

に次のスタイルを追加します。デフォルトでは、要素がinline-blockの場合にのみ発生します。それを修正するには、要素の親にline-heightプロパティを追加するだけです。

また、.inputtxtパディングを0に設定して、入力の既定のパディングを削除することもできます。

.remind{ 
 
     float: left; 
 
     width: 80px; 
 
     height: 40px; 
 
     background-color: #cccccc; 
 
     border: 1px solid black; 
 
} 
 

 
.inputtxt{ 
 
     display: inline-block; 
 
     width: 200px; 
 
     height: 12px; 
 
     border-radius: 5px; 
 
     border: 1px solid #999999; 
 
    } 
 

 
    .formitm { 
 
     line-height: 10px; /*less or equal than inline-block child*/ 
 
    } 
 

<div class="formitm"> 
 
     <div class="remind"></div> 
 
     <div class="inputtxt"></div> 
 
    </div> 
 
    <div class="formitm"> 
 
     <div class="remind"></div> 
 
     <input type="text" class="inputtxt"/> 
 
    </div> 
 
    <div class="formitm"> 
 
     <div class="remind"></div> 
 
     <input type="text" class="inputtxt"/> 
 
    </div>