如何使元素具有相同的边距和宽度？

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;
}

所有元素都具有相同的边距，填充和宽度。但第二个元素与第三个元素之间的距离是不同的，select更短！

小提琴是here

Answer 1

要修复宽度，请添加此CSS规则：

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

要修复边距：将display: inline-block添加到...

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

这是有效的：http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/

Answer 2

归功于Box-Sizing。 Input的大小调整为content-box，而select默认为border-box为box-sizing。因此，您可以通过将其添加到标记来更改选择的box-sizing属性

select
{
   box-sizing:content-box;
}

未设置此属性select的高度低于其他元素（在Chrome中）。

设置此项后，还有一件事是您的元素仍在父容器之外。这是因为您将width=100%与padding : 4px一起放置，使其大于父级的100%。所以只需从左右设置0填充。

Padding:4px 0;

并且对于第三元素中的不均匀边缘添加

display:inline-block;

Update Js Fiddle

Answer 3

尝试向padding

添加第二个值

padding:4px 0;

Fiddle

在Firefox 23中测试

<强>更新：

要修复元素2和3之间的边距，请在padding

中设置所有4个边

margin:4px 0 0 0;

要将间距保持在底部，请在外部padding

中设置div

padding:0 0 4px 0;

Updated fiddle