css - propiedad - white space html
Eliminar "espacio en blanco" entre el elemento div (8)
Añadir line-height: 0px; a tu padre div
jsfiddle: http://jsfiddle.net/majZt/
Este es mi código HTML
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
Mi CSS:
#div1 {
width:150px;height:100px;white-space:nowrap;
border:blue 1px solid;padding:5px;
}
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
}
Si inserto el <!DOCTYPE html> antes de la etiqueta <html> , la página se verá así:
Pero si <!DOCTYPE html> etiqueta <!DOCTYPE html> , se eliminará el ''espacio en blanco'' entre las dos líneas
Pero me gustaría usar la etiqueta <!DOCTYPE html> , se recomienda, pero no puedo encontrar ninguna regla CSS que pueda eliminar ese espacio en blanco, he usado el margen: 0; contorno: ninguno; etc ... pero no funciona, nadie me ayude. Gracias! (No soy bueno en inglés ...)
Aunque probablemente no sea el mejor método que podría agregar:
#div1 {
...
font-size:0;
}
La forma más sencilla de solucionar este problema es aplicar la propiedad vertical-align: top a las reglas de CSS:
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
vertical-align: top;
}
Si tuviera que agregar contenido a sus div , entonces usar line-height: 0 o font-size: 0 causaría problemas con el diseño de su texto.
Ver fiddle: http://jsfiddle.net/audetwebdesign/eJqaZ/
De dónde viene este problema
Este problema puede surgir cuando un navegador está en modo "peculiaridades". En este ejemplo, cambiando el doctype de:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
a
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
Cambiará la forma en que el navegador maneja los espacios en blanco adicionales.
En el modo peculiar, el espacio en blanco se ignora, pero se conserva en modo estricto.
Referencias:
HTML doctype añade espacios en blanco?
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Necesitas esto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<-- I absolutely don''t know why, but go ahead, and add this code snippet to your CSS -->
*{
margin:0;
padding:0;
}
Eso es todo, diviértete eliminando todos esos problemas de espacios en blanco.
Puede usar la altura de línea en div1 como se muestra a continuación:
<div id="div1" style="line-height:0px;">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
Vea esto: http://jsfiddle.net/wCpU8/
Usar un <br/> para hacer una nueva fila es una mala solución desde el principio. Haga que su contenedor # div1 tenga un ancho igual a 3 divisiones para niños. <br/> en mi opinión, no debe usarse en otros lugares que no sean párrafos.
use line-height: 0px;
El código CSS:
div{line-height:0;}
Esto afectará genéricamente a todos tus Div. Si desea que su división padre existente solo no tenga espacio, puede aplicar lo mismo en él.
HTML
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
CSS
#div1 {
width:150px;height:100px;white-space:nowrap;
line-height: 0px;
border:blue 1px solid;padding:5px;
}
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
}