如何防止<button>缩小到其内容的大小？

Question

我在容器中有两个元素:

<div class="container">
    <span>This is a div</span>
    <button>This is a button</button>
</div>

风格如下:

span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    margin: 5px;
    background: #c0c0c0;
    font: inherit;
}

.container {
    border: 1px solid black;
}

你可以在这里看到现场演示.

为什么按钮的宽度与跨度不同？如何使按钮的行为类似于标准块级元素？

我需要在<button>这里使用,因为它的目的是提交表格.

Answer 1

我期望有一些规则集使它们都表现得像<div>s

没有。原因是这button是一个“替换元素”。

我能找到的最清晰的来源是：http://reference.sitepoint.com/css/replacedelements

替换元素是其外观和尺寸由外部资源定义的任何元素。示例包括图像（<img>标签）、插件（<object>标签）和表单元素（<button>、<textarea>、 <input>和<select>标签）。所有其他元素类型都可以称为非替换元素。

被替换的元素还可能具有元素所施加的视觉格式要求，超出了 CSS 的控制；例如，为表单元素呈现的用户界面控件。