CODEWITHSUNDEEP
htmlcss
Joe Essey
Joe Essey

Reputation: 3527

How can I get some padding between these form boxes?

I'm trying to display 2 form boxes on one line and another below them. Anything I try with divs cannot get these 2 fields to separate. I've even tried to insert   between them with no luck.

Here's my html:

<div class="form-line">
  <input class="input-text" id="name-box" type="text" name="name" value="Name">
  <input class="input-text" id="mail-box" type="text" name="mail" value="Email">
</div>

CSS:

.input-text {
  padding-left: 3px;
  font-family: sans-serif;
}

.input {
  display: inline;
}

.form-line {
  padding-top: 5px;
  clear:both;
}

#name-box {
  float: left;
}

#mail-box {
  float: left;
}

Can you please give me an idea of how to put 10px between these boxes? Thanks.

Upvotes: 0

Views: 54

Answers (3)

Maxime Lorant
Maxime Lorant

Reputation: 36161

You need to put your inputs as display:inline-block (will not work on IE 8 and below except if you hack it a little):

input {
    display: inline-block;
    padding:0 5px;


    /** Just for IE <= 8 */
    *display:inline;
    *zoom:1;
}

Here's a working jsfiddle.

Upvotes: 3

Nicholas Shanks
Nicholas Shanks

Reputation: 10971

To arrange the second to the right of the first:

.form-line>input{display:inline-block}
.form-line>input+input{margin-left:10px}

Upvotes: 0

Ichigo Kurosaki
Ichigo Kurosaki

Reputation: 3843

Give margin-left to the mail box , so your mail box css will be

#mail-box {
  float: left;
    margin-left:10px;
}

Upvotes: 0

Related Questions