How to make elements the same margins and width? - html

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 second end the third element is different and select is shorter !?
fiddle 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 margins: 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's it working: http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/

Answer 2

Try adding a second value to padding
padding:4px 0;
Fiddle
Tested in Firefox 23
UPDATE:
To fix the margin between elements 2 and 3, set all 4 sides in padding
margin:4px 0 0 0;
To keep the spacing at the bottom, set a padding in the outer div
padding:0 0 4px 0;
Updated fiddle

Answer 3

It is due to Box-Sizing.
Input has box-sizing is content-box whereas select is by default has border-box as box-sizing. So you can change the box-sizing property for the select by adding this to your markup
select
{
box-sizing:content-box;
}
Without setting this property select has less height than the other elements (In Chrome).
One more thing is after setting this your elements are still outside the parent container. It is because you have put their width=100% along with padding : 4px which make them bigger than 100% of parent. So just set 0 padding from left and right.
Padding:4px 0;
And for the uneven margin in third element add
display:inline-block;
Update Js Fiddle