pourquoi ne pas flotter div près de la ligne supérieure, semble avoir une certaine marge?

Question

J'ai quelques questions à propos de ce code.

1. Le premier élément de classe inputtxt est un affichage en ligne simple. Les deux derniers éléments de classe inputtxt sont des champs de texte en entrée. Pourquoi ils montrent différents? Le champ de texte de saisie a-t-il un remplissage par défaut? Pourquoi l'alignement vertical faisant référence à la div grise est-il différent?
2. Tous les éléments de classe inputtxt ont des distances d'espacement supérieures et inférieures par rapport aux lignes précédentes et suivantes. Pourquoi?

Merci beaucoup!

.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

Ajouter le style suivant à votre .inputtxt

padding: 0; vertical-align: top;

Answer 2

Lorsque la hauteur div est plus petit que div line-height le navigateur adapte les prochains éléments en fonction du réglage hauteur de ligne par défaut, cela arrive juste quand l'élément est inline-block. Pour résoudre ce problème, ajoutez simplement une propriété line-height au parent de l'élément.

Vous pouvez également définir le remplissage .inputtxt sur 0, en supprimant le remplissage par défaut en entrée.

.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>