HTML | CSS入力フォームの間のスペース

Question

1. 私は、HTML/CSSで入力フォームの間にスペースを削除するにはどうすればよい

2. どのように私は（ボタンやテキストボックスが同じ行に作ることができ、すなわちそれらを作る削除同じサイズで、上部に同じアライメントがあります&ボトム）？赤いボタンは、テキストボックスより少し下に表示されます。

ボタンのパディング/高さで再生しようとしましたが、機能しません。 ここに私のコードです：

input[type="text"], [type="password"]{ 
 
\t font-family: 'Quicksand'; 
 
\t width:300px; 
 
\t height:35px; 
 
\t border:1px solid #87e0e5; 
 
\t box-sizing:border-box; 
 
\t border-radius:2px; 
 
\t padding-left:10px; 
 
\t opacity:0.75; 
 
} 
 

 
input[type="text"], [type="password"], [type="search"]:focus { 
 
\t background-color: #FFF; 
 
\t opacity: 0.90; 
 
\t border: 1px solid #41e1ea; 
 
} 
 

 
.text_cari { 
 
\t font-family: 'Quicksand'; 
 
\t width:150px; 
 
\t border:1px solid #87e0e5; 
 
\t box-sizing:border-box; 
 
\t border-radius:2px; 
 
\t padding: 10px 0px 8px 40px; 
 
\t opacity:0.75; 
 
} 
 

 
.btn_cari { 
 
\t font-family: 'Quicksand'; 
 
\t background:no-repeat url(../img/icons8-Search-20.png) 7px; 
 
\t padding-left:20px; 
 
\t border:none; 
 
\t background-color: #f44336; 
 
    color: white; /*font color*/ 
 
\t height:35px; 
 
\t width:70px; 
 
    text-align: center; 
 
\t text-decoration:none; 
 
\t cursor:pointer; 
 
} 
 

 
.btn_cari:hover { 
 
\t background-color: #f45f36; 
 
}

<form style="padding-top:200px"> 
 
      <input class="text_cari" placeholder="Lokasi pekerjaan" name="cari" type="search" style="background:url(img/icons8-Marker-20.png) no-repeat 7px #FFFFFF"> 
 
\t \t \t <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;"> 
 
      <input type="submit" class="btn_cari" value="Cari"> 
 
     </form>

これは私が

Answer 1

1. を達成しようとしているものですギャップが空白ある：それらの間の空白を削除し、すなわち：

表示されているギャップは、実際にはHTMLの空白です。

整列すべての要素： は、それらが異なる高さであり、垂直配向を設定する必要があるため、フォーム要素は整列していません。

ただ、この追加：FYI

form input { vertical-align:middle; height:35px; } 

を、すべてのテキストボックスが実際に36pxです：編集可能な "テキスト" 領域は16pxに+ 18pxのパディング+の2ピクセルの境界線です。上の詰め物を例えばに変更することができます。 8px。私はまた、境界の半径を削除するので、すべてが完全に隣接しています。ボタンはテキストと同じ高さを有するようにする方法を

form input { vertical-align:middle; height:35px; } 
 

 
.text_cari { 
 
\t font-family: 'Quicksand'; 
 
\t width:150px; 
 
\t border:1px solid #87e0e5; 
 
\t box-sizing:border-box; 
 
\t padding: 8px 0px 8px 40px; 
 
\t opacity:0.75; 
 
} 
 

 
    .btn_cari { 
 
\t font-family: 'Quicksand'; 
 
\t background:no-repeat url(../img/icons8-Search-20.png) 7px; 
 
\t padding-left:20px; 
 
\t border:none; 
 
\t background-color: #f44336; 
 
    color: white; /*font color*/ 
 
\t height:35px; 
 
\t width:70px; 
 
    text-align: center; 
 
\t text-decoration:none; 
 
\t cursor:pointer; 
 
} 
 

 
.btn_cari:hover { 
 
\t background-color: #f45f36; 
 
}

<form> 
 
      <input class="text_cari" placeholder="Lokasi pekerjaan" name="cari" type="search" style="background:url(img/icons8-Marker-20.png) no-repeat 7px #FFFFFF"><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;"><input type="submit" class="btn_cari" value="Cari"> 
 
     </form>