How to make elements the same margins and width?

Question

<div id="divL"> <input name="email" type="text" placeholder="input text"> <div class="divInput">divInput</div> <div class="divtxt">divtxt</div> <input name="sname" type="text" placeholder="input text"> <select name="srodstvo"> <option value="1">select</option> <option value="2">323</option> </select> <div class="divtxt">divtxt</div> </div> 

CSS

 *{ margin:0; padding:0; } #divL{ width:45%; margin:5vh 0 0 5vw; border:thin solid blue; } input[type="text"], .divtxt, .divInput, select{ width:100%; margin:4px 0; padding:4px; border:thin solid #999; border-radius:3px; } 

All elements have the same margins, padding and width. But the distance between the second end of the third element is different and select shorter !?

the script is here

Answer 1

To fix the width, add this CSS rule:

 input, select { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } 

To fix the fields: add display: inline-block to ...

 input[type="text"], .divtxt, .divInput, select { width:100%; margin:4px 0; padding:4px; border:thin solid #999; border-radius:3px; display: inline-block; } 

Here it works: http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/

Answer 2

This is due to Box-Sizing . Input has the size of the content-box window, while select by default has border-box as Box-Sizing . This way you can change the size selection property for the selection by adding this to your markup

 select { box-sizing:content-box; } 

Without setting this property, select has a lower height than other elements (in Chrome).

Another thing is that after installation, these items are still outside the parent container. This is because you placed their width=100% along with padding : 4px , which make them more than 100% parent. So just set 0 padding left and right.

 Padding:4px 0; 

And for an uneven field in the third element add

 display:inline-block; 

Update Js Fiddle

Answer 3

Try adding a second value to the padding

 padding:4px 0; 

Fiddle

Tested in Firefox 23

UPDATE

To fix the border between elements 2 and 3, set all 4 sides to padding

 margin:4px 0 0 0; 

To keep the distance down, set padding in the outer div

 padding:0 0 4px 0; 

Updated fiddle