¿Cómo hacer que el diseño de HTML sea independiente del espacio en blanco?

EDITAR: Existe la casi misma pregunta en Removing whitespace between HTML elements when using line breaks, sin embargo, aparte de la sugerencia de "flotante", no encuentro ninguna de las respuestas adecuadas para mis requisitos. Me gustaría que esto permanezca abierto para más sugerencias innovadoras¿Cómo hacer que el diseño de HTML sea independiente del espacio en blanco?

Si tiene inline-block s consecutivos, el espacio en blanco se vuelve significativo. Agrega cierto nivel de espacio entre los elementos. ¿Cuál es la forma "correcta" de evitar el efecto de espacio en blanco en el diseño de HTML si desea que esos bloques se vean pegados entre sí?

Ejemplo:

<span>a</span> 
<span>b</span>

Esto hace de manera diferente que:

<span>a</span><span>b</span>

debido al espacio intermedio. Quiero que el efecto de espacio en blanco se vaya sin comprometer el diseño del código fuente HTML. Quiero que mis plantillas HTML se mantengan limpias y bien sangradas.

Creo que estas opciones son feas:

1) Afinando text-indent, margin, etc. padding (Porque sería dependiente de tamaño de fuente, por defecto la anchura de espacio en blanco, etc.)

2) Poner todo en una sola línea, uno al lado del otro.

3) Zero font-size. Eso requeriría reemplazar el tamaño de fuente en bloques, que de lo contrario serían heredados.

4) Posibles soluciones para todo el documento. Quiero que la solución permanezca local para cierto bloque de HTML.

¿Alguna idea, cualquier punto obvio que me falta?

Fuente

2010-04-07 Sedat Kapanoglu

No debe utilizar la versión sin espacio entre los elementos, simplemente haga que todo funcione con espacio. Probablemente necesite establecer elementos en línea en display:block para lograr el diseño correcto.

Eche un vistazo a this similar question of mine, que tiene algunas buenas respuestas.

Editar: Una de las respuestas en la pregunta anterior sugiere el uso de comentarios HTML, como último recurso, por ejemplo .:

<span>a</span><!-- 
--><span>b</span>

Fuente

2010-04-07 21:30:59 Skilldrick

¿Cómo lo haces con 'block's sin especificar los valores absolutos y con espacios en blanco? –

Oh no pude encontrar la otra pregunta, gracias por el enlace. Parece que el flotador es la forma establecida de hacerlo. –

tenía este mismo problema con un plugin reciente que estaba desarrollando. Como estaba utilizando inline-block, y como el complemento requería absolutamente cero espacio entre los elementos, y nunca supe cuáles podrían ser los elementos, tuve que encontrar una solución que no requiriera la intervención del usuario.

He aquí:

function removeWhiteSpace(raw) { 
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); 
    return cleaned_string; 
}

JavaScript parece ser la única solución real al problema. Extraigo los datos HTML usando jQuery, y luego los ejecuto a través de esta función para limpiarlos.

Fuente

2010-04-07 21:31:15 dclowd9901

Me abstendría de ir por eso porque la manipulación DOM JavaScript es muy costosa (desencadena actualizaciones DOM, cálculo de diseño y repintado), especialmente en dispositivos móviles. Float funcionó bien en mi caso. –

si su problema es que los espacios en blanco redundantes o divisiones separadas/Uso "ul" con CSS correspondiente y puede hacer su trabajo/

por supuesto hay reset.css/

html:

<ul id="uList"> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
</ul>

css:

ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}

Fuente

2010-04-08 00:15:24 spielersun

Esto no está relacionado con UL o LI. En realidad es "flotante" lo que soluciona el problema aquí. (vea la otra pregunta) –

también es posible usar word-spacing:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Inline-blocks without whitespace between</title> 
<style> 
html, 
body 
    { 
     background:  #fff; 
     padding:  0; 
     margin:   0; 
    } 
p 
    { 
     background:  #9ab; 
     text-align:  center; 
     margin:   50px; 
     padding:  0 20px; 

     word-spacing: -.3em; 
    } 
span 
    { 
     display:  inline-block; 
     padding:  3px; 
     color:   #def; 
     background:  #678; 
     word-spacing: normal; 
    } 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    /** 
    * Since WebKit fails on word-spacing for 
    * inline-block … we have to hack. 
    */ 
    span 
     { 
      margin:   0 -.2em; 
     } 
} 
</style> 

<p> 
    <span>Inline-block<br>number 1</span> 
    <span>Inline-block<br>number 2</span> 
    <span>Inline-block<br>number 3</span> 
</p>

Live demo

Fuente

2010-04-08 03:03:06 fuxia

Esto es bueno, pero no parece muy diferente a la especificación de márgenes/relleno/sangría. ¿Qué significa "-.3em"? ¿Y qué significará cuando cambie la fuente utilizada en el bloque? –

'.3em' es el espacio que los navegadores web suelen tener para un espacio en blanco normal. Puede tomar para los bloques en línea cualquier fuente que desee; el espaciado de palabras se calcula a partir de la fuente 'p'. La principal diferencia con 'margin' o' text-indent' es visible cuando los bloques en línea colisionan con el borde de su elemento primario: un margen negativo los empuja fuera del cuadro principal. Y 'relleno 'no puede resolver su problema de todos modos. – fuxia

¿Cómo hacer que el diseño de HTML sea independiente del espacio en blanco?

Respuesta

Cuestiones relacionadas