title: HTML|CSS Remove spaces between input form
body: <ol>
  <li><p>How can I remove spaces between input form in html / css </p></li>
  <li><p>How can I make the button and the textbox be on the same line (i.e. make them the same size and have the same alignment across the top &amp; bottom)? The red button is appearing slightly lower than the text boxes.</p></li>
  </ol>
  
  <p>I tried playing with button's padding / height, but it's not working.
  Here's my code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="text"], [type="password"]{
   font-family: 'Quicksand';
   width:300px;
   height:35px;
   border:1px solid #87e0e5;
   box-sizing:border-box;
   border-radius:2px;
   padding-left:10px;
   opacity:0.75;
  }
  
  input[type="text"], [type="password"], [type="search"]:focus {
   background-color: #FFF;
   opacity: 0.90;
   border: 1px solid #41e1ea;
  }
  
  .text_cari {
   font-family: 'Quicksand';
   width:150px;
   border:1px solid #87e0e5;
   box-sizing:border-box;
   border-radius:2px;
   padding: 10px 0px 8px 40px;
   opacity:0.75;
  }
  
  .btn_cari {
   font-family: 'Quicksand';
   background:no-repeat url(../img/icons8-Search-20.png) 7px;
   padding-left:20px;
   border:none;
   background-color: #f44336;
      color: white; /*font color*/
   height:35px;
   width:70px;
      text-align: center;
   text-decoration:none;
   cursor:pointer;
  }
  
  .btn_cari:hover {
   background-color: #f45f36;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form style="padding-top:200px"&gt;
              &lt;input class="text_cari" placeholder="Lokasi pekerjaan" name="cari" type="search" style="background:url(img/icons8-Marker-20.png) no-repeat 7px #FFFFFF"&gt;
     &lt;input class="text_cari" placeholder="Masukkan jabatan atau perusahaan" name="cari" type="search" style="background:url(img/icons8-Job%20Seeker-32.png) no-repeat 7px #FFFFFF; width:150px;"&gt;
              &lt;input type="submit" class="btn_cari" value="Cari"&gt;
          &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what i'm trying to achieve <a href="https://i.stack.imgur.com/8kIoH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8kIoH.jpg" alt="This is what i&#39;m trying to achieve"></a></p>