¿Cómo evitar el subrayado de anclaje de espacios en blanco sin cambiar el estilo de codificación?

Question

Echa un vistazo a la siguiente violín:

http://jsfiddle.net/DNhAk/14/

Cuando se tiene una imagen con el texto envuelto en un ancla/enlace, el espacio en blanco entre la imagen y el texto en el código crea un espacio en blanco subrayada en el página renderizada justo antes del texto.

Cuando no hay imagen, no hay espacios en blanco subrayados aunque haya espacios en blanco en el código.

La única manera que puedo ver para evitar este espacio en blanco subrayado es eliminar el espacio en blanco en mi código. Pero odio alterar mi estilo de codificación para alterar la presentación de la página renderizada. De todos modos, la alteración de su HTML para manipular la presentación de una página está mal de todos modos. Es como usar saltos de línea (<br/>) para agregar espacio entre elementos en lugar de usar CSS.

¿Existe alguna propiedad de CSS no tan obvia para solucionar este problema?

ACTUALIZACIÓN Por alguna razón las personas se están colgando en los bordes de la imagen y el margen que tenía en el código. Solo los puse allí para que se vea bien. No tienen nada que ver con el problema, así que los eliminé y actualicé el violín para que la gente pueda entender más claramente cuál es el problema.

Answer 1

Puede emular el efecto con un poco de CSS:

img { 
    border: 1px solid #CCC; 
    padding: 10px; 
    vertical-align: middle; 
    float:left; 
} 

a { 
    display:block; 
    height:70px; 
    line-height:70px; 
} 

http://jsfiddle.net/DNhAk/8/

Answer 2

Utilice dos enlaces separados para diferentes elementos, que están dentro de la corriente. No he visto aún una solución CSS. Es porque toda el área se considera enlace, obviamente. Esta solución temporal está funcionando desde el momento.

<a href='#'> 
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' 
    width='50' height='50'/> 
</a> 
<a href='#'> 
No Underlined Whitespace 
</a> 

Answer 3

en lugar de relleno, tratar margen

img { 
    border: 1px solid #CCC; 
    margin: 10px; 
    vertical-align: middle; 
}​ 

Answer 4

este es el comportamiento esperado, ya que hay espacios después de las imágenes: Debe cambiar su estructura html correo, utilice en su lugar:

<a href='#'> 
<img src='SoccerBall.jpg'/> <span>Your text</span> 
</a> 

CSS:

a{text-decoration:none;} 
a>span{text-decoration:underline;} 

Answer 5

deshacerse del espacio en el anclaje entre la imagen y el texto (esto es lo que se está subrayado). En su CSS, proporcione img 'margin-right: 10px' (o el valor que desee). Retire el relleno.

EDITAR

Para aclarar:

Inserción de un carácter de espacio después de la imagen no se incluye en "estilo de codificación" - se han codificado específicamente un espacio en el valor de texto del ancla.

CSS se comporta según lo previsto a este respecto: está diseñando el contenido de texto del delimitador (incluido el espacio) con un subrayado, porque no ha anulado ese comportamiento para el contenido de texto en un delimitador.

Al eliminar el espacio no está alterando su estilo de codificación, está alterando el contenido. Sucede que esto eliminará el problema de estilo al que se enfrenta.

Entiendo que estás preguntando si hay una forma de retener el espacio en el ancla y también apuntar a ese personaje con CSS, no creo que haya una manera de hacerlo.

Estoy señalando que al eliminar el espacio no está alterando la semántica del contenido de ninguna manera significativa (ciertamente no de forma visual, porque quiere ocultarlo de todos modos, por lo que el único efecto posible podría ser agentes no visuales, la mayoría de los cuales no transmiten el espaciado de una manera significativa en este contexto de todos modos).

De hecho, sospecho que la intención de ese personaje espacial es más orientada a la presentación que orientada a la semántica.

Alterar el HTML con fines de presentación no es ideal, pero en general no se trata de alterar su HTML per se - se trata de alterar el significado que está transmitiendo con HTML. En este caso, creo que es completamente correcto alterar su HTML para transmitir el mismo significado .

Hay ocasiones en las que modifica su documento para satisfacer sus necesidades semánticas y sus necesidades de diseño: siempre que transmita el mismo significado y flujo lógico de información, realmente no es un problema para el consumidor de el contenido.

Answer 6

Se podría establecer el CSS para el elemento a así:

a { 
    display: inline-block; 
} 

Answer 7

estoy de acuerdo con su pregunta y creo que es bien pensado y nos lleva a un punto muy bueno. Como se hace referencia en este SO question, existe una propiedad CSS3 experimental llamada text-space-collapse que ha propuesto valores de discard, trim-inner, trim-before and trim-after que podrían utilizarse para resolver este problema.

Creo que la mejor solución que encontrará hasta que se implemente text-space-collapse será alterar su marcado ligeramente. Puede envolver el texto en un lapso y luego usar display: table como una solución.

http://jsfiddle.net/CPh82/

a { display:table; } 

a > * { display: table-cell; vertical-align: middle; } 

<a href='#'> 
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/> 
    There is underlined whitespace at beginning of this text 
</a> 

Answer 8

El comportamiento que está experimentando es parte de la especificación (http://www.w3.org/TR/html401/struct/text.html):

Para todos los elementos HTML, excepto PRE, secuencias de espacio en blanco "palabras" separadas (usamos el término "palabra" aquí significa "secuencias de caracteres de espacio no blanco"). Al formatear texto, los agentes de usuario deben identificar estas palabras y presentarlas de acuerdo con las convenciones del lenguaje escrito particular (guión) y el medio de destino.

Este diseño puede implicar poner espacio entre las palabras (llamado espacio entre palabras), pero las convenciones para el espacio entre palabras varían de secuencia de comandos a secuencia de comandos. Por ejemplo, en los scripts latinos, el espacio entre palabras se suele representar como un espacio ASCII (& # x0020;), mientras que en tailandés es un separador de palabras de ancho cero (& # x200B;). En japonés y chino, el espacio entre palabras generalmente no se representa en absoluto.

Así que mediante la adición de un elemento (IMG) seguido de un espacio en blanco (nueva línea) en su margen de beneficio, que instruyeron a los agentes de interpretar su imagen como "palabra", y añadir espacios en blanco según sea apropiado para el idioma se configura el agente in. Si desea eliminar este espacio en blanco del resultado, deberá eliminarlo del marcado.

Alternativamente, podría eliminar por completo la imagen de su marcado, y colocarla como fondo en el anclaje, eliminando así cualquier pieza de presentación de su marcado. Ejemplo aquí:

<a href='#' class="imglink"> 
There is 
<em>no</em> 
underlined whitespace at beginning of this text</a> 

CSS:

.imglink { 
min-height: 50px; 
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat; 
background-size: 50px 50px; 
display: block; 
padding-left: 55px; 
line-height: 50px 
} 

Hay algunos puntos débiles de este método, por supuesto, pero es una solución potencial en función de sus otras limitaciones.

http://jsfiddle.net/hellslam/pvHK8/