Espacio en blanco que aparece usando CSS: después y: contenido

5 minutos de lectura

Estoy tratando de diseñar la salida de wp_list_categories usando CSS para poner comas entre elementos. Sin embargo, aparece un espacio en blanco antes de la coma y, en serio, ¡no puedo comprender de dónde viene!

he hecho un jsbin demostrar y comparar.

Captura de pantalla:
ingrese la descripción de la imagen aquí

HTML:

<ul id="category-listing">
    <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
</li>
    <li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
</li>
    <li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
</li>
    <li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
</li>
    <li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
</li>
    <li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a>
</li>
</ul>

CSS:

li {
  font-size: 46px;
  display: inline;
  margin: 0;
  padding: 0;
}

#category-listing li:after {
  content: ', ';
}

El espacio en blanco aparece porque está en su código HTML.

El cierre </li> la etiqueta está en una nueva línea. Los retornos de carro se cuentan como espacios en blanco en HTML y, por lo tanto, tiene espacios en blanco al final del elemento del elemento de la lista.

La razón por la que aparece es porque está usando display:inline. cuando usas inline (o inline-block), el espacio en blanco es relevante porque inline significa “tratar este elemento como texto sin formato” y, por lo tanto, cualquier espacio en blanco se considera una parte intencional del texto.

La mejor manera de deshacerse de esto es simplemente poner el </li> etiqueta de cierre en la misma línea que el resto del texto, de modo que no haya espacios en blanco allí.

Hay varias otras formas de evitarlo, pero la mayoría de ellas involucran CSS bastante pirateado; simplemente cerrar el espacio es, con mucho, la opción más fácil.

La siguiente mejor alternativa es cambiar a usar float:left en vez de display:inline. Esto también resolverá el problema, pero cambiará la forma en que se representa todo, lo que requerirá que realices otros cambios en tu CSS para compensar.

  • Gracias por la explicación descriptiva. Las nuevas líneas fueron insertadas por el wp_list_categories función pero los he eliminado con un str_replace str_replace("\n", '', $snip);. ¡Perfecto, gracias!

    – gofre

    15 mayo 2013 a las 13:13

  • En realidad, en este caso particular, hay una solución css realmente simple sin usar flotantes, al menos para los navegadores modernos: #category-listing li a:after { content: ' '; font-size: 0;}

    – Alohci

    15 mayo 2013 a las 13:46

  • Tenía miedo de esto, y supongo que tengo que vivir con líneas de HTML realmente largas. Es triste que mis opciones parezcan ser HTML feo o CSS pirateado. Esperaba que hubiera algún tipo de función de ‘recorte’ en CSS para sortear los tihs.

    –Michael Scheper

    4 mayo 2017 a las 17:41

  • @MichaelScheper Tenga en cuenta que esta respuesta tiene varios años. Mientras tanto, se han agregado cosas a CSS que pueden ayudarlo, y algunas opciones ahora están disponibles porque ya no tenemos que admitir navegadores más antiguos. El mundo de los navegadores en 2017 es bastante diferente al que tuvimos que enfrentar en 2013.

    – Spudley

    4 mayo 2017 a las 21:41

  • Para ser honesto, creo que la respuesta correcta a la pregunta original es poner el estilo de coma en el a etiqueta en lugar de la li…. es decir a:after{ ... } en vez de li:after { ...}. No estoy seguro de por qué no lo vi cuando respondí la pregunta originalmente, pero si está buscando hacer lo mismo, inténtelo. La respuesta más genérica que probablemente esté buscando es usar CSS display:flex en vez de display:inline. Es posible que también deba realizar otros cambios para acompañarlo, y no tengo tiempo para entrar en detalles, pero búsquelo y vea cómo va.

    – Spudley

    5 mayo 2017 a las 21:54

Hacer flotar el ancla dentro del elemento de la lista resolverá este problema:

li a {float:left;}

es porque tienes spaces con inline monitor. Tienes dos opciones:

  1. Eliminar espacios:

    <ul id="category-listing">
        <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
    </li><li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
    </li><li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
    </li><li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
    </li><li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
    </li><li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a></li>
    </ul>
    
  2. Usar float:

    ul {overflow: hidden;}
    ul li {float: left;}
    

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad