为什么按钮会超出包装范围？

Question

参考this：

（使用twitter-bootstrap）

HTML：

<div class="e1">
    <span class="e2">
        some text
        <input type="button" class="btn btn-default" value="A Button"/>
        some text
    </span>
</div>

的CSS：

.e1 {
    border: 1px solid red;
}

.e2 {
    border: 1px solid #555;
}

结果：

为什么该按钮不在包装span

中

Answer 1

将填充应用于内联元素（在本例中为按钮）时，只有左右填充将替换周围的内容。顶部和底部填充不会调整周围的内容。 CSS 2规范进入了这个，但它不容易阅读：http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced。

您只是在寻找解释，还是想以某种方式改变显示？如果您想要不同的东西，请告诉我们。

一些不太技术性的消息来源：

• http://webdesign.about.com/od/styleproperties/qt/css-padding.htm（见 “添加CSS填充的影响”部分）
• http://www.maxdesign.com.au/articles/inline/

Answer 2

将span display更改为inline-block

updated fiddle

span {
    display : inline-block;
}

Answer 3

该范围是inline类型的元素，您应该使用div或section之类的内容，或者只需在您的css中设置span {{1} } display。