How do I add a pixel of space between my inputs? - html

Question

I have these fields in a search form …
<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>
then I have this style for the form …
#search-form {
display: flex;
flex: 1 0 auto;
}
Problem is, the elements appear right next to each other — https://jsfiddle.net/fmy1syfw/ . I would like at least a pixel of space between them to not make everything seem so cramped. I have tried adding
margin: 1px;
to the above style, but to no avail. How do I add a pixel of space between my elements without breaking the behavior of the form at different screen widths?

Answer 1

Just add margin as required to the inputs and remove it in your media queries (again, as required).
Since you have used fixed widths of 50% in you media query, these will have to be adjusted using calc to account for the extra margin.
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