Obtengo algunos espacios en blanco extraños entre dos divs que tengo.Eliminar el espacio en blanco entre los divs
Cada div tiene la propiedad css display: inline-block y cada una tiene un alto y ancho establecidos.
No puedo encontrar dónde está el espacio en blanco.
Usted obtener espacio en blanco allí porque usted tiene un espacio en blanco entre medio de los divs. El espacio en blanco entre elementos en línea se interpreta como un espacio.
tiene:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Cambio para:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Sin embargo, esto es una mala manera de hacer lo que quiere hacer.
Debe flotar los elementos si eso es lo que quiere hacer.
¿Le gustaría explicarlo? –
No se preocupe, estoy restableciendo el equilibrio por usted. :) – AlexKempton
¿Qué ocurre con% width/heights? – Pup
flotaba tanto de los elementos de la izquierda, hecho también la anchura 30% en 40% a llenar todo el espacio, pero esto no es necesario. Tenga en cuenta que IE7 no admite el "bloque en línea", pero se puede solucionar con una solución alternativa.
Esto, por supuesto, es otra opción. Aunque debe tenerse en cuenta que los elementos flotados deben ser eliminados. – Purag
Buenos puntos, pero realmente no responde la pregunta del OP. Este es realmente un comentario que debe ir sobre la pregunta, en lugar de una respuesta. –
Tiene toda la razón, de alguna manera me perdí de vista con este. – AlexKempton
mover estas declaraciones en la misma línea:
</div><div id="right_side">
Esto hace el truco:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Note como el div del lado derecho se inicia inmediatamente después de la etiqueta de cierre del div del lado izquierdo . Esto funciona porque cualquier espacio entre los elementos, dado que ahora están en línea, se convertiría en un espacio en el diseño en sí. Puede reflejar este comportamiento con dos elementos de tramo.
Demo.
Uso:
float:left;
clear:none;
En tanto div
intentado usar flotador, en lugar de "inline-block", no hay problemas. Acaba de cambiar el display: inline-block a:
#left_side {float: left;}
y
#right_side {float: right; margin-right: 10%}
No hay problemas aparentes. Podría estar equivocado
Los flotadores y los bloques en línea (así como las celdas de tabla y las cajas flexibles) son fundamentalmente diferentes. Las cuatro técnicas * pueden ser * adecuadas para la alineación horizontal de los elementos, pero tienen diferentes limitaciones y desventajas. En teoría, las flexboxes parecen ser la forma más universal de las cuatro, pero el soporte de los navegadores de la última versión de la especificación sigue siendo bastante limitado. –
Sólo añadir esto a tu CSS
h1 {
padding:0;
margin:0;
}
Espacio entre div sólo se debe al margen h1 y el relleno
Si desea conservar el diseño de codificación, evitar los flotadores y mantener cada div en su propio línea completamente ...
<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>
No sabe por qué, pero resuelto este problema mediante la adición border: 1px solid red; (vertical) y float: left; (horizontal) a la declaración de estilo DIV relacionada y los espacios en blanco eliminados.
Gracias, muchachos. –