Dave Dave - 2 months ago 7
HTML Question

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

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

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