Abstand zwischen Eingabefeldern entfernen

Question

Zwischen den Eingabefeldern, die ich habe, gibt es einige kleine Abstände. Wie kann ich das entfernen? Außerdem scheint die Bestätigungsschaltfläche eine andere vertikale Position als die anderen Elemente zu haben, warum ist das so? Screenshot unten:

.stockWrapper { 
 
    position: absolute; 
 
    display: block; 
 
    top: 10px; 
 
    margin: 0 auto; 
 
    width: 250px; 
 
    left: calc(50% - 75px); 
 
    padding: 0px; 
 
} 
 

 
.stock { 
 
    box-sizing: border-box; 
 
    width: 75px; 
 
    font-size: 2em; 
 
    margin: 0px; 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
.confirmBtn, .clearBtn { 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-weight: bold; 
 
    border: 1px solid black; 
 
    font-size: 2em; 
 
    margin: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 0px; 
 
} 
 

 
.clearBtn { 
 
    background-color: red; 
 
} 
 

 
.confirmBtn { 
 
    background-color: green; 
 
}

<div class="stockWrapper"> 
 
    <input type="button" class="clearBtn" value="X"> 
 
    <input type="number" class="stock"> 
 
    <input type="button" class="confirmBtn" value="✓"> 
 
</div>

Answer 1

1. Der Abstand zwischen den Eingängen ist wegen der neuen Linien
2. die Tasten vertikal auszurichten hinzufügen line-height-.confirmBtn und .clearBtn
3. Für die Zecke Zeichen den entsprechenden HTML-Code verwenden ✓

Beispiel:

.stockWrapper { 
 
    position: absolute; 
 
    display: block; 
 
    bottom: 10px; 
 
    margin: 0 auto; 
 
    width: 250px; 
 
    left: calc(50% - 75px); 
 
    padding: 0px; 
 
} 
 

 
.stock { 
 
    box-sizing: border-box; 
 
    width: 75px; 
 
    font-size: 2em; 
 
    margin: 0px; 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
.confirmBtn, .clearBtn { 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-weight: bold; 
 
    border: 1px solid black; 
 
    font-size: 2em; 
 
    margin: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 0px; 
 
    line-height:48px; 
 
} 
 

 
.clearBtn { 
 
    background-color: red; 
 
} 
 

 
.confirmBtn { 
 
    background-color: green; 
 
}

<div class="stockWrapper"> 
 
    <input type="button" class="clearBtn" value="X"><input type="number" class="stock"><input type="button" class="confirmBtn" value="&#10004;"> 
 
</div>

Answer 2

Sie haben einige nicht druckbare Zeichen (verdeckt) zwischen den Tags. Bitte verwenden Sie diese:

<div class="stockWrapper"><input type="button" class="clearBtn" value="X"><input type="number" class="stock"><input type="button" class="confirmBtn" value="✓"></div>