0

  1. How can I remove spaces between input form in html / css

  2. 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 & bottom)? The red button is appearing slightly lower than the text boxes.

I tried playing with button's padding / height, but it's not working. Here's my 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;
}
<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">
   <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>

This is what i'm trying to achieve This is what i'm trying to achieve

FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
XMozart
  • 879
  • 2
  • 10
  • 22

1 Answers1

1

  1. The gaps are white space: Remove the white space between them, i.e.:

The gap you are seeing is actually the white space in the html.

  1. Align all elements: The form elements are not in alignment because they are different heights and the vertical alignment needs to be set.

Just add this:

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

FYI, all your text boxes are actually 36px: the editable "text" area is 16px + 18px padding +2px border. You can change the top padding to e.g. 8px. I's also remove the border radius, so everything is perfectly adjoined.

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

.text_cari {
 font-family: 'Quicksand';
 width:150px;
 border:1px solid #87e0e5;
 box-sizing:border-box;
 padding: 8px 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;
}
<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>
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
  • how to make the button have the same height as the text ? – XMozart Sep 27 '17 at 09:28
  • @whoever downvoted this answer - did they even try the snippet? Removing the white space removes the gap,which is exactly what the OP asked for!!!! – FluffyKitten Sep 27 '17 at 09:29
  • 2
    @FluffyKittenI think you just solve half the problem; you have yet to make the button the same line with input, so maybe you should do that too, or this will be a uncompleted answer. – Eezo Sep 27 '17 at 09:32
  • @HenryVarro The OPs question wasn't clear, so to me they were "on the same line" - they are all in a vertically-centered line. But the question is closed now anyway.... – FluffyKitten Sep 27 '17 at 09:40
  • @XMozart The question is closed as a duplicate because id appears to mainly be about the gap. If you update your question to focus on the alignment issue (and add that as the edit comments), it might get re-opened. I've an answer for you about the alignment when you do. – FluffyKitten Sep 27 '17 at 10:27
  • Thank you, i don't know how the 'keyword' to search for my problem bc i'm really new in this web programming things, so i made another one. – XMozart Sep 28 '17 at 01:14