¿Cuál es la diferencia de usar {text-decoration: underline} y {border-bottom: ...}?texto-decoración: subrayado vs fondo de borde
que es fácil de usar y compatible con varios navegadores?
cuando deberíamos usar border-bottom sobre text-decoration: underline?
¿Sería bueno usar border-bottom siempre en lugar de text-decoration: underline?
border-bottom pone una línea en la parte inferior del cuadro del elemento. text-decoration:underline hace que el texto esté subrayado. La diferencia exacta depende de los motores de diseño de texto y HTML en uso, pero, en general, si desea que el texto esté subrayado, a continuación, subrayarlo.
bottom-border le permite controlar la distancia entre el texto y el subrayado, por lo que es más versátil. Y (como se mencionó anteriormente) permite un color diferente para el subrayado (aunque no veo una razón por la que desee hacer eso).
text-decoration es más 'correcto' porque es la propiedad de CSS 'real' destinada a subrayar el texto.
si establece text-decoration: underline para todos los enlaces, tendrá que establecer text-decoration: none para los enlaces especiales que no necesita un subrayado. pero si se utiliza border-bottom lugar, se ahorrará una línea de código CSS (proporcionar configura text-decoration: none en su CSS reset.
así que en general, voy a votar por border-bottom si usted tiene un diseño complejo con diferentes estilos para cada enlace, pero text-decoration para un sitio web sencillo codificado 'por el libro'.
Como dijo Ignacio, border-bottom pondrá la línea en la parte inferior de la caja que contiene, mientras que text-decoration:underline realmente subrayar el texto. Esto se convierte en una distinción importante para cadenas de varias líneas.
I am a single line and will look similar for both methods
---------------------------------------------------------
probablemente represente lo mismo para ambos estilos, pero obtendrá lo siguiente para cadenas de varias líneas.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Disculpas por el uso de formato de código en lugar de desgarrador adecuadamente estos ejemplos, pero se puede ver el punto que estoy tratando de hacer.
como dice matt a continuación, por favor pruebe su código antes de responder - usando pantalla: en línea; no causará la frontera para rendir como usted sugiere, es una propiedad de los elementos de bloque específicamente –
Lamento decir esto, pero algunas respuestas aquí son engañosas. La división de una línea de texto no coloca el borde en la parte inferior de todo el bloque, debido a la naturaleza de los bloques en línea. Los bordes debajo de los enlaces son en realidad más consistentes en todos los navegadores que la decoración de texto: subrayado.
¿Esta respuesta le ayuda en Aplicaciones Web: http://webapps.stackexchange.com/q/24349/29140 –
el establecimiento de su texto que se mostrará en línea (en realidad, debería ser que, por defecto) hará que el border-bottom para rendir tanto como una regla de texto-decoración. Sin embargo
, presumo que desea utilizar esta técnica en los enlaces de la siguiente manera:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
que es todo muy bien, pero usted encontrará que dondequiera que usted tiene una etiqueta img dentro de una enlace, la imagen tendrá un borde rojo debajo de ella.
si puede encontrar una forma de apuntar al padre de un elemento de página (la imagen) usando selectores existentes y sin javascript, le compraré una cerveza, pero no creo que tenga mucha suerte.
usando "text-decoration" evita este problema por completo como una imagen claramente no es de texto, no va a hacer un subrayado cuando dentro de un enlace.
si tiene un control total sobre su marcado, supongo que puede abrirse camino agregando clases a cada enlace, pero si está trabajando con cualquier sistema CMS popular, va a tener problemas con esta idea.
Prueba este borde de la imagen 1px
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
con Mientras que siempre va a haber casos en los que uno es más apropiado que el otro, border-bottom ofrece un control mucho más preciso sobre text-decoration y es, por lo tanto, probablemente, el método preferido. He aquí una lista rápida (probablemente no exhaustiva) de propiedades que border-bottom puede controlar/activar que text-decoration no puede:
En muchos casos, la mayor parte de estas habilidades no serán necesarios - pero es bueno tener a disposición! He pasado a utilizar border-bottom principalmente por la capacidad de poner unos pocos píxeles de relleno entre el texto y el subrayado; el siguiente uso más común que he encontrado es divorciar el color de subrayado del color del texto.
Con las variables CSS ya a la venta en todos los principales navegadores, un "reset" hoja de estilo podría ser algo como esto:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
De esta manera, los enlaces se mostrará como se esperaba sobre una base "por defecto", y aún así permitir para la personalización según sea necesario.
pero sí podemos dar color diferente al texto en la frontera con fondo –
bien. Pero aún no es un subrayado. –