<botón> problema de relleno / ancho
Estoy usando<button>
para realizar una solicitud de publicación en un formulario. También diseñé una.button
exactamente como el<button>
(Necesito ela.button
para hacer algunas cosas de JS).
El botón tiene algo de relleno, una altura fija. Cuando especifico el ancho del botón / a, ambos se ven iguales. Pero cuando agrego ancho a la<button>
ignora el relleno.
Tengo este problema en Chrome, Firefox y Opera, así que supongo que no es un error de representación. También el mismo problema con<input type="submit" />
Aquí está el CSS básico:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
El HTML:
<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>
Violín:http: //jsfiddle.net/9dtnz
¿Alguna sugerencia de por qué los navegadores ignoran el relleno? (arriba y abajo cuando usa altura / izquierda y derecha cuando usa ancho).