CODEWITHSUNDEEP
csshtmlinput
Abddoo
Abddoo

Reputation: 63

How to make submit input and text input equally spaced

I noticed while styling a web page when you do :

 <input type='text' placeholder='input1' />
 <input type='text' placeholder='input2' />
 <input type='submit'  />

for a form and add this css :

 input[type='text']{
    display:block;
}

input{
    width:400px;
}

There are some difference between the width of the text inputs and the submit button ~ 20px as I think but how to make them equally large ?

Here is a snippet

input[type='text']{
    outline:none;
    border:1px solid lightgrey;
    border-radius:3px;
    display:block;
    text-align:center;
}

input{
    width:400px;
}
<input type='text' placeholder='input1' />
<input type='text' placeholder='input2' />
<input type='submit'  />

I tried resting the margin and padding but it doesn't work why ?

Upvotes: 0

Views: 76

Answers (2)

H&#233;ctor E
H&#233;ctor E

Reputation: 436

This happens because the in the placeholders the borders and padding are added to the total, so this <input type="text" placeholder="input1" style="border-width: 1px; padding: 1px;"></input> becomes a placeholder which measures 404 pix. (400 + 1px right border + 1px left border + 1 px left padding + 1 px right padding).

In the submit's case, this: <input type="submit" style="border-width: 20px; padding: 20px;"> becomes a 400 px button with a wide border but still will be 400px wide. The padding will affect mostly to the text, which will still be centered, so it won't be very noticeable. If you apply some unilateral padding, like padding-right:300px, you will notice.

Upvotes: 0

nickles80
nickles80

Reputation: 1101

By default the button uses 

box-sizing: border-box;

Which means the border (and all padding) is included in the width. The text box does not have that rule so appears 2px larger (1px for each border, left & right).

Add the box-sizing rule to the text box and they will be the same width.

Upvotes: 2

Related Questions