选择、提交元素的右边距为 20px

Question

如标题中所述，选择和提交元素的右边距为 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 帖子了解更多信息