为什么按钮标签会自动垂直对齐文本

Question

即使在display:block元素上设置button后，内部文本仍然是垂直居中的，与div不同。是什么导致了这种行为以及如何防止这种行为？

示例：http://jsfiddle.net/7vx4ucj8/

Answer 1

回答你的第一个问题。每个浏览器都有基于W3C规范的html元素的预定义样式。

Answer 2

您可以执行此操作http://jsfiddle.net/7vx4ucj8/1/

<强> HTML

<div>Div</div>
<button><span>Button</span></button>

<强> CSS

div {
    height: 100px;
    background-color: blue;
}

button {
    height: 100px;
    background-color: gray;
    display:block;
    width: 100%;
    position: relative;
}

span {
    position: absolute;
    top: 0;
    left: 0;
}