Wie füge ich zwischen meinen Eingaben einen Pixelabstand hinzu?

Question

Ich habe diese Felder in einem Suchformular ...

<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓"> 
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField"> 
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField"> 
    <input type="text" name="event" id="event" placeholder="Event" class="searchField"> 
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"> 
</form> 

dann habe ich diesen Stil für das Formular ...

#search-form { 
    display: flex; 
    flex: 1 0 auto; 
} 

Problem ist, werden die Elemente direkt nebeneinander - https://jsfiddle.net/fmy1syfw/. Ich hätte gerne mindestens einen Pixel Abstand zwischen ihnen, um nicht alles so eng erscheinen zu lassen. Ich habe versucht,

margin: 1px; 

zum obigen Stil hinzuzufügen, aber ohne Erfolg. Wie füge ich ein Pixel des Raumes zwischen meinen Elementen hinzu, ohne das Verhalten des Formulars bei verschiedenen Bildschirmbreiten zu brechen?

Answer 1

Fügen Sie einfach den Rand wie erforderlich zu den Eingaben hinzu und entfernen Sie ihn in Ihren Medienabfragen (falls erforderlich).

Da Sie in Ihrer Medienabfrage feste Breiten von 50% verwendet haben, müssen diese unter Verwendung von calc angepasst werden, um die zusätzliche Marge zu berücksichtigen.

body { 
 
    background-color: grey; 
 
} 
 
#logo { 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 
#searchForm { 
 
    padding: 20px; 
 
} 
 
#search-form { 
 
    background-color: orange; 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
} 
 
#last_name, 
 
#event { 
 
    margin-left: 1px; 
 
} 
 
#first_name, 
 
#last_name { 
 
    width: 20%; 
 
} 
 
#event { 
 
    flex-grow: 1; 
 
} 
 
/* Do not specify width to allow it to grow freely */ 
 

 
.search_button { 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 
/* Predefine image dimensions to ensure proper aspect ratio */ 
 

 
#loginArea { 
 
    border-radius: 25px; 
 
    font-size: 20px; 
 
    padding: 20px; 
 
    background-color: #ffffff; 
 
    color: #000000; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    width: 100%; 
 
    max-width: 580px; 
 
} 
 
@media (max-width: 620px) { 
 
    #search-form { 
 
    flex-wrap: wrap; 
 
    } 
 
    #first_name { 
 
    width: 50%; 
 
    margin: 0; 
 
    } 
 
    #last_name { 
 
    width: calc(50% - 1px); 
 
    margin-left: 1px; 
 
    } 
 
    #event { 
 
    width: calc(100% - 40px); 
 
    margin: 0; 
 
    } 
 
} 
 
.searchField { 
 
    line-height: 40px; 
 
    font-size: 22px; 
 
    margin: 0; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
    -webkit-appearance: textfield; 
 
    background-color: white; 
 
    -webkit-rtl-ordering: logical; 
 
    -webkit-user-select: text; 
 
    letter-spacing: normal; 
 
    word-spacing: normal; 
 
    text-transform: none; 
 
    text-indent: 0px; 
 
    text-shadow: none; 
 
    text-align: start; 
 
}

<div id="loginArea"> 
 

 
    <div id="searchForm"> 
 
    Search For Results 
 
    <br /> 
 
    <div> 
 
     <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"> 
 
     <input name="utf8" type="hidden" value="✓"> 
 
     <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField"> 
 
     <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField"> 
 
     <input type="text" name="event" id="event" placeholder="Event" class="searchField"> 
 
     <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"> 
 
     </form> 
 
    </div> 
 
    </div> 
 

 
</div>

JSFiddle Demo