Problem mit div Tag

[Ryuno-Ki]

Moin jbaben,

mit dem gezeigten HTML-Code habe ich ein Problem mit der Änderung vom Abstand zwischen den beiden Eingabe-Feldern. Das hintere Eingabe-Feld soll nur mit einem gerineren Abstand und auf gleicher Höhe folgen. von welchem Wert hängt der Abstand ab ?

<div style="margin:24px 0; display:flex; align-items:flex-start; gap:25px;">
    <div style="flex:1;">
      <strong>City/Town:</strong><br>
      <input type="text" name="addr_city" maxlength="30"
             style="width:79%; height:52px; font-size:30px; font-family:'Courier New',monospace;
                    letter-spacing:3px; text-transform:uppercase; padding:8px 5px;
                    border:3px solid #000; background:white;">
    </div>
    <div style="width:170px;">
      <strong style="display:block; text-align:center; margin-bottom:4px;">Postal code</strong>
      <input type="text" name="addr_postalcode" maxlength="4" placeholder=""
             style="width:100%; height:52px; font-size:30px; font-family:'Courier New',monospace;
                    text-align:left; padding:8px 5px; border:3px solid #000; background:white;">
       </div>
  </div>

(Ich hab das gap: 25px korrigiert hier).

Du legst für das hintere <div> eine Breite von 170px fest (flex-basis wäre meiner Meinung nach angemessener). Damit greift flex:1; beim vorderen <div> und nimmt den restlichen Raum ein.

Innerhalb des ersten <div> wird das <input /> eine Breite von 79% einnehmen. Hier könntest du beispielsweise auch auf 100% gehen. Dann wäre das gap für den Abstand verantwortlich.

Gruß,