Unerklärlicher Rand nach Eingabefeld

Question

Ich habe ein wenig codepen woran ich gerade arbeite. Und nach einem Eingabefeld gibt es nur einen zufälligen Rand. Ich setze

*{ 
    margin: 0; 
    padding: 0; 
} 

, so dass sollte nicht der Grund sein. Zusätzlich wird die CSS der beiden Eingabefelder:

#plannername{ 
    width:40%; 
    background-color:#9eefbc; 
    margin-left:20%; 
    border:0; 
    font-size:2em; 
    padding:20px; 
} 

#plannersubmit{ 
    width:17%; 
    background-color:#6dce91; 
    border:0; 
    font-size:2em; 
    padding:20px; 
} 

Wie man dort sehen kann, ist nicht Rand, mit Ausnahme der margin-left: 20% der #plannername. Aber das sollte den kleinen Rand rechts davon nicht beeinflussen. Was könnte diese kleine Marge verursachen ???

Answer 1

Wenn Sie Strg + A drücken sehen Sie, dass es eigentlich keinen Spielraum, sondern ein einziger Raum.

Hier ist ein großer Artikel darüber und wie man es loswerden: https://css-tricks.com/fighting-the-space-between-inline-block-elements/