CSS: por qué no puedo configurar el alto y el ancho de <a href> elements?

<a href="access.php" class="css_button_red">Forgot password</a>

But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.

You can preview the problem here btw, www.matkalenderen.no Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.

What am I missing here?

Fuente

2010-04-14 Kenny Bones

As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:

a { 
    display: block; 
}

Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.

See PPK's writeup al respecto.

El uso real de este valor es cuando se quiere dar un ancho a un elemento en línea. En algunas circunstancias, algunos navegadores no permiten un ancho en un elemento real en línea, pero si cambias a mostrar: bloque en línea puedes establecer un ancho.

Fuente

2010-04-14 06:23:11 nickf

¡Jaja! Inline-block arreglado muchas cosas para mí! Cuando se usa solo display: block, todo el botón estaba desalineado. Pero ahora, sigue el mismo flujo que el botón de formulario :) ¡Gracias! –

Tenga cuidado con el bloque en línea. No es uniformemente compatible con navegadores. Conozca sus análisis y asegúrese de que se muestren bien en todos los buscadores estadísticamente significativos para su sitio. Notiblemente, IE 6 y 7 carecen de soporte sólido de bloque en línea. Consulte http://www.quirksmode.org/css/display.html#t03 – kingjeffrey

@kingjeffrey Quirksmode afirma que IE6 y 7 solo tienen problemas con el bloque en línea cuando se aplica a elementos que no son nativamente en línea. Por lo tanto, no será un problema cuando se aplica a un ''. – nickf

Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.

Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.

Fuente

2010-04-14 06:18:53 kingjeffrey

Gracias, pensé que ya lo había intentado. Ahora, de repente, funcionó. ¡Hombre, solo muestra lo importante que es tener una mente estructurada cuando se trata de codificar css! –

creo que la solución más adecuada es display: inline-block; que le permitirá configurar height para el elemento que todavía va a ser tratado como inline elemento.

Fuente

2010-04-14 06:25:12 Crozin

CSS: por qué no puedo configurar el alto y el ancho de <a href> elements?

Respuesta

Cuestiones relacionadas