Tengo varias DIV mostradas como bloques en línea; y parece que el espaciado se aplica automáticamente entre ellos desde el navegador. Tienen margen/relleno establecido en 0. ¿Hay alguna forma de corregir esto sin usar márgenes negativos?¿Bloque en línea sin márgenes?
Sam, ese espacio que estás viendo es en realidad el espacio en blanco. Es por eso que eliminar los rellenos y los márgenes no hace nada. Dejame explicar. Cuando se tiene esto:
HTML
<div>
a
a
a
a
</div>
esto es cómo se hacía:
a a a a
... ¿verdad?
Por lo tanto, si usted tiene esto:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
... obtendrá la misma cosa:
block [space] block [space] block
Ahora ... hay muchas soluciones diferentes a este problema. Creo que el más común está comentando a cabo el espacio en blanco en el html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
no me gusta que aunque - Yo prefiero mantener el html lo más limpio posible. Mi forma preferida es establecer el tamaño de fuente del padre en 0, y luego volver a establecer el tamaño de fuente deseado en los bloques en línea.De este modo:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
No necesita utilizar márgenes negativos para compensar los márgenes originales.
lugar se los puede sustituir con lo siguiente:
* { margin:0; }
o:
.div { margin:0; }
si es elemento específico.
EDIT:
Parece que el problema puede ser el resultado de los espacios en blanco no deseados. Por ejemplo:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
Existe espacio en blanco entre los dos divisores y el navegador imprimirá el espacio en blanco como resultado. Para solucionar este problema, tendrá que cambiarlo a:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
disfrutar y buena suerte!
lo que no * hacer? – Sam
* es un carácter comodín en CSS que representa todos los elementos en un documento dado. –
Esto no parece resolver mi problema de márgenes. Quizás "márgenes" es el término equivocado. Tengo varios divs uno al lado del otro y el navegador está espaciando por defecto entre ellos; a pesar de que están configurados en magin 0 y relleno 0. – Sam
inline-block es originalmente un IE6 piratear
Esto es lo que su utiliza para:
Así que si quieres tener varias Div lado fuerza favor utilice flotador, su va a resolver muchos de sus problemas de CSS que inline-block puede causar, especialmente navegador cruz emite
Más sobre inline-block here arcticle 9.2.4
saludos SP
favor comentar si en desacuerdo
inline-block no es un truco, es para permitir que los elementos fluyan como si fueran parte del texto. Tu consejo sobre usar flotador es malo. El uso innecesario de float causa problemas de mantenimiento, probablemente significará que su sitio no responde a los diferentes tamaños de pantalla/ventana, y tiene un diseño deficiente. – Jake
El bloque en línea tiene algunos problemas, por lo que es un juego suelto, y estoy de acuerdo en que la flotación no es la solución ideal, pero no tienes un bloque en línea en IE6, así que es por eso que elegiría float como alternativa. –
Otra manera que he encontrado el método de alterar la palabra de espaciamiento en el contenedor primario que funciona para mí https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
Puede utilizar tanto display: inline-block y float: left para eliminar ese espacio.
aquí va plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
+1 - ambas son buenas soluciones. – Wex