html - lista - poner elementos en linea css
display: margen extra de bloque en línea (12)
¿Puedes publicar un enlace al HTML en cuestión?
En última instancia, debería poder hacer:
div {
margin:0;
padding: 0;
}
para eliminar el espaciado ¿Esto solo está en un navegador en particular o en todos ellos?
Esta pregunta ya tiene una respuesta aquí:
Estoy trabajando con algunos div s que están configurados para display: inline-block y tienen un height y width . En el HTML, si hay un salto de línea después de cada div hay un margen automático de 5 píxeles para agregar a la derecha y a la parte inferior del div.
Ejemplo:
<div>Some Text</div>
<div>Some Text</div>
¿Hay alguna propiedad que haya pasado por alto que me permita restablecer el margen automático?
Actualizar
Por lo que he encontrado, no hay forma de eliminar el margen ... excepto si tiene todo en la misma línea o si agrega comentarios para comentar los saltos de línea. ejemplo:
<div>Some Text</div><!--
--><div>Some Text</div>
No es la mejor solución, pero aún más fácil de leer si tienes varias líneas.
Después de luchar con este tema muchas veces, encontré una solución muy elegante en HTML 5. En HTML 5, no debe cerrar varias etiquetas (li, p, etc.); la ambición de convertirse en XML se ha ido para siempre. Por ejemplo, la forma preferida de hacer una lista es:
<ul>
<li>
<a ...>...</a>
<li>
<a ...>...</a>
</ul>
Los navegadores DEBEN cerrar el LI y deben hacerlo sin introducir espacios en blanco, resolviendo este problema. Si todavía tienes la mentalidad XML, se siente mal, pero una vez que superas eso, te ahorras muchas pesadillas. Y esto no es un truco, ya que se basa en la redacción de la especificación HTML 5. Mejor, dado que no cerrar las etiquetas es generalizado, espero que no haya problemas de compatibilidad (aunque no se han probado). La ventaja es que los formateadores HTML manejan esto bien.
Un pequeño ejemplo resuelto: http://cssdesk.com/Ls7fK
Hay una serie de soluciones para este problema que implican espaciado de palabras o tamaño de fuente, pero este artículo sugiere eliminar el margen con un margen derecho de -4px;
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Los divs son tratados como elementos en línea. Del mismo modo que un espacio o salto de línea entre dos tramos crearía un espacio, lo hace entre bloques en línea. Puede darles un margen negativo o establecer word-spacing: -1; en el contenedor circundante.
Me encontré con el mismo problema. Lo que me causó fue un montón de espacios en blanco ( ) que inserté. Después de eliminarlos, el problema fue resuelto.
Otra solución a esto es usar un minificador de HTML. Esto funciona mejor con un proceso de compilación de Grunt, donde el HTML se puede minimizar sobre la marcha.
Se eliminan los saltos de línea y los espacios en blanco adicionales, lo que soluciona el problema del margen perfectamente, y le permite escribir el marcado como lo desee en el IDE (no </li><li> ).
Para el registro, ese reinicio de margen y relleno no funcionó, pero esta cita de uno de los comentarios anteriores resultó ser crucial y resolvió el problema para mí: "Si pongo los divs en la misma línea, el margen desaparece ".
Puedes obtener un espacio vertical a pesar de que NO TIENES NINGÚN ESPACIO BLANCO entre los elementos del bloque en línea.
Para mí, esto fue causado por line-height . La solución simple fue:
div.container {
line-height: 0;
}
div.container > * {
line-height: normal;
}
Un año después, tropecé con esta pregunta por un problema de LI línea, pero encontré una gran solución que puede aplicarse aquí.
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
vertical-align:bottom de todos mis elementos LI solucionó mi problema de "margen extra" en todos los navegadores.
Una forma más limpia de eliminar esos espacios es mediante el uso de float: left; :
DEMO
HTML:
<div>Some Text</div>
<div>Some Text</div>
CSS:
div {
background-color: red;
float: left;
}
Es compatible con todos los navegadores nuevos . Nunca lo entendí, ¿por qué cuando IE dictaminó que muchos desarrolladores no lo hicieron? Su sitio funciona bien en Firefox / Chrome, pero hoy, cuando IE se ha reducido al 14.3% . de todos modos, no tenía muchos problemas en IE-9 aunque pensara que no es compatible, por ejemplo, la demostración anterior funciona bien.
font-size: 0 al contenedor principal
(Fuente: https://twitter.com/garand/status/183253526313566208 )
El espacio en blanco afecta a los elementos en línea .
Esto no deberia venir como sorpresa. Lo vemos todos los días con span, strong y otros elementos en línea. Establezca el tamaño de la fuente en cero para eliminar el margen adicional.
.container {
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.container > div {
display: inline-block;
margin: 0px;
padding: 0px;
font-size: 15px;
letter-spacing: 1em;
word-spacing: 2em;
}
El ejemplo se vería así.
<div class="container">
<div>First</div>
<div>Second</div>
</div>
Una versión jsfiddle de esto. jsfiddle.net/QtDGJ/1