How to make submit input and text input equally spaced


Tags: html,css,html5,input

Problem :

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 ?



Solution :

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.


    CSS Howto..

    How to mark search phrase in syntax highlighted markdown code?

    How to properly position DIVS on a page to

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How does the Meebo bar work so well cross-browser?

    How can I create a searchbar like this?

    show/hide slider toggle for any number of IDs

    How do I change the admin header color in Magento?

    how can I reload a “CSS background-image” each time I hover on it?

    CSS: How can I set image size relative to parent height?

    SASS: normalize.css works, but does not show up in compiled CSS file?

    How can a div be aligned center using jquery [closed]

    CSS How to align checkbox image

    How to use CSS to create a dynamic corner frame?

    How to use pure CSS to show an animation of one element's background and color property?

    How this blur works

    how to use pseudo-classes (like after, before) inline in CSS

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    How to make the margins and border in a mobile website invisible html/css

    How to cancel CSS effect in Responsive Website Footer menu?

    How do I make images interactive?

    How to come back to original state with a toggle button in jQuery?

    How to apply icons to links using css?

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How to fill margin space with divs and give it styles?

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to decrease CSS opacity

    How to use an image more than one place in CSS

    How to add CSS inline in Vaadin?

    How to apply css to 'text' and 'password' together [closed]

    How (where) can i set fixed cell size in nested html tables, with css?