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

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

这是由于Box-Sizing。 Input 的 box-sizing 是 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 2

尝试将第二个值添加到padding

padding:4px 0;

Fiddle

在 Firefox 23 中测试

更新：

要固定元素 2 和 3 之间的边距，请将所有 4 个边设置为 padding

margin:4px 0 0 0;

要保持底部间距，请在外部div 中设置padding

padding:0 0 4px 0;

Updated fiddle

Answer 3

要固定宽度，请添加此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/