Foros del Web » Creando para Internet » CSS »

Eliminar espacios en blanco

Estas en el tema de Eliminar espacios en blanco en el foro de CSS en Foros del Web. Hola, estoy realizando un diseño y tengo una duda sobre como eliminar los espacios en blanco que quedan entre el header y el section y ...
  #1 (permalink)  
Antiguo 29/09/2012, 10:37
 
Fecha de Ingreso: junio-2012
Mensajes: 19
Antigüedad: 12 años
Puntos: 1
Pregunta Eliminar espacios en blanco

Hola, estoy realizando un diseño y tengo una duda sobre como eliminar los espacios en blanco que quedan entre el header y el section y entre los sections. También como posicionar el nav más arriba. Cualquier otra crítica constructiva será bienvenida.
Estoy utilizando boilerplate.

Código HTML:
Ver original
  1.         <section id="Logo">
  2.             <p>Logo</p>            
  3.         </section>
  4.  
  5.         <nav>
  6.             <ul>
  7.                 <li>Link</li>
  8.                 <li>Link</li>
  9.                 <li>Link</li>
  10.             </ul>
  11.         </nav>
  12.  
  13.     </header>
  14.  
  15.     <section id ="Section1">    
  16.         <p>Section1</p>    
  17.     </section>
  18.  
  19.     <section id ="Section2">
  20.         <article>
  21.             <p>Article</p>
  22.         </article>
  23.         <article>
  24.             <p>Article</p>
  25.         </article>
  26.         <article>
  27.             <p>Article</p>
  28.         </article>
  29.     </section>
  30.  
  31.     <section id = "Section3">
  32.         <article>
  33.             <h3>Article</h3>
  34.         </article>
  35.         <article>
  36.             <h3>Article</h3>
  37.         </article>
  38.     </section>
  39.  
  40.     <section id="Section4">
  41.         <p>Section4</p>
  42.     </section>
  43.  
  44.     <footer>
  45.         <p>Footer</p>
  46.     </footer>

Código CSS:
Ver original
  1. /* ==========================================================================
  2.    Author's custom styles
  3.    ========================================================================== */
  4.  
  5. header{
  6.     background: #B39E00;
  7.     height: 8em;
  8. }
  9.  
  10. #Logo{
  11.     background: #9BB300;
  12.     display: inline-block;
  13.     width: 15%;
  14. }
  15.  
  16. nav{
  17.     background: #6EB300;
  18.     margin-left: 20%;
  19.     width: 75%;
  20. }
  21.  
  22. nav li{
  23.     display: inline-block;
  24.     margin-left: 15%;    
  25. }
  26.  
  27. #Section1{    
  28.     background: #2AA2C0;
  29.     height: 20em;
  30. }
  31.  
  32. article{
  33.     background: #15B300;
  34.     display: inline-block;
  35.     margin-left: 20%;
  36.     margin-top: 2em;
  37. }
  38.  
  39. #Section2{    
  40.     background: #922F20;
  41.     display: block;
  42.     height: 15em;
  43. }
  44. #Section3{
  45.     background: #C0C02A;
  46.     display: block;
  47.     height:15em;    
  48. }
  49.  
  50. #Section4{
  51.     background: #C5DC60;
  52.     display: block;    
  53.     height: 15em;
  54. }
  55.  
  56. footer{
  57.     background: #748E1F;
  58.     display: block;
  59.     height: 4em;
  60. }

Descarga del Diseño completo:

[URL=http://depositfiles.com/files/oevwn8eyq]http://depositfiles.com/files/oevwn8eyq[/URL]
  #2 (permalink)  
Antiguo 29/09/2012, 11:35
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 3 meses
Puntos: 192
Respuesta: Eliminar espacios en blanco

Usá reset.css o normalize.css. Estas son hojas de estilo que eliminan los estilos por defecto del navegador y te dan una base de dónde partir. Esos espacios en blanco que ves son márgenes y paddings que el navegador aplica.

La diferencia entre reset.css y normalize.css es que el primero "resetea" todos los estilos. El segundo es más efectivo y moderno, pues lo que hace es aprovechar algunos estilos del navegador y normalizarlos para que se vean igual en todos lados.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 29/09/2012, 11:52
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 4 meses
Puntos: 8
Respuesta: Eliminar espacios en blanco

Hola aclaucio,

Boilerplate viene con normalize.css incluido en su última versión.

Las etiquetas <p> tienen por defecto un margin. Y la etiqueta <section> no crece por default.

Ese espacio en blanco que ves es el margen de la etiqueta <p>

Podés o sacarle los margenes a <p>

Código:
p {
margin: 0;
}
O hacer que crezcan automáticamente los <section>

Código:
section {
overflow: auto;
}
Saludoss.
__________________
Pablo Lombardo
http://www.pablolombardo.com/
  #4 (permalink)  
Antiguo 29/09/2012, 13:22
 
Fecha de Ingreso: junio-2012
Mensajes: 19
Antigüedad: 12 años
Puntos: 1
Respuesta: Eliminar espacios en blanco

Gracias, me sirvió de mucho. La solución del overflow me parece más eficiente.
  #5 (permalink)  
Antiguo 30/09/2012, 10:20
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 4 meses
Puntos: 8
Respuesta: Eliminar espacios en blanco

Genial, me alegro que te halla servido.

Y si, sacarles los márgenes a los párrafos no tiene sentido. Estoy de acuerdo.

Saludoss.
__________________
Pablo Lombardo
http://www.pablolombardo.com/

Etiquetas: boilerplate, section
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:05.