css - select, submit 元素有 20px 右边距

Question

如 title 中所述，select 和 submit 元素的右边距为 20px。其他元素不？

DL>* {
    margin: 10px 0px;
    background: #aaa;
}

DL>*>* {
    display: inline-block;
    border: 5px solid #666;
    padding: 5px;
    margin: 5px;
    width: 250px;
}

<dl>
    <dt><label for="name">Ваше имя</label></dd>
    <dd><input id="name" name="name" type="text"></dd>
    <dt><label for="name">Ваши контактные</label></dd>
    <dd><input id="name" name="name" type="text"></dd>
    <dt><label for="name">Vali</label></dd>
    <dd><select><option>1</option><option>2</option></select></dd>
    <dt><label for="question" name="name">вопрос</label></dt>
    <dd><textarea id="question"></textarea></dd>
    <dd><input type="submit" value="спросить"></dd>
</dl>

Answer 1

这是因为关于宽度、填充和边框宽度如何影响它们在屏幕上显示的最终宽度，表单元素的规则略有不同。解决这个问题的“正确”方法是将这些表单元素使用的框模型重置为所有其他元素使用的框模型，使用 box-sizing属性:

dl > * > * {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

查看此现场演示:http://jsfiddle.net/9dGkk/1/还有这个Quirksmode post了解更多信息