Soy un nuevo integrante para el diseño web. He creado mi página web, maquetación con CSS y HTML como el siguiente. El problema es que a pesar de que yo establezca el margen de 0, el borde superior no se ajuste a 0 y deja un poco de espacio. ¿Cómo se puede borrar este espacio en blanco?

Captura de pantalla del problema

CSS Margin: 0 no se ajuste a 0

Hoja De Estilo

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

Aquí está el archivo de la

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>
InformationsquelleAutor Nipuna | 2011-03-22

8 Comentarios

  1. 35

    Probar…

    body {
       margin: 0;
       padding: 0;
    }

    jsFiddle.

    Porque de los navegadores utilizando diferentes hojas de estilo por defecto, algunas personas recomiendan un restablecer hoja de estilos tales como Eric Meyer Restablecer Reloaded.

    • No, no es trabajo. Pero cuando voy a insertar algo sin ningún tipo de etiquetas, entre «encabezado» y «header_content» etiquetas de su trabajo
    • A mí me funcionó. Pruebe el CSS reset he ligado, no puede ser más márgenes y/o acolchados en juego.
    • He enlazado el CSS reset de la hoja y, a continuación, funcionó! Gracias!!
  2. 21

    Que usted necesita para establecer la página actual margin:0 y padding: 0 a la real html, no sólo el cuerpo.

    uso esta en su hoja de estilos css.

    *, html {
        margin:0;
        padding:0;  
    }

    que hará que la página entera a 0, para un nuevo comienzo limpio sin margen o rellenos.

    • ¿Qué hace exactamente el * hacer?
    • «que hará que la página entera a 0». Tienes razón, va a establecer la TOTALIDAD de la página 0. Con el * cada elemento de la página tendrá un margen y el relleno de 0, lo que no quería.
    • Trabajó para mí. Gracias.
    • Por qué * y html? No la * partido de la html elemento?
  3. 4

    usted debe tener una (o ambas):

    1. un paddding != 0 en el cuerpo
    2. un margen !=0 #encabezado

    intentar

    html, #header {
        margin: 0 !important;
        padding: 0 !important;
    }

    La margin es el «espacio» fuera el cuadro, el padding es el «espacio» dentro de la caja (entre el borde y el contenido).
    El !important prevenir primordial de la propiedad por último reglas.

    • He publicado todo el documento html. Es que funcione bien para usted?
    • no, no trabajo… y no se puede ver por qué. esto es frustrante ! todas las dev tools muestran un margen/relleno de 0.
    • Usted debe utilizar !important es con moderación, en todo caso.
  4. 3

    Intentar

    html, body{
      margin:0 !important;
      padding:0 !important;
    }
    • No, No funcionó tampoco. Pero el restablecimiento de la hoja trabajado. Me preguntaba cuál es el problema
    • véase mi respuesta a continuación… me tomó demasiado tiempo para escribir, ya aceptado 😉
    • ¿Tienes alguna de las tablas en html. Me pregunto qué en el restablecimiento de archivo de la solución de su problema. ¿Tiene usted otras HTML de carga, además de lo que usted suministró anteriormente.
    • Lo siento, pero el restablecimiento de la hoja trabajó para mí. Por eso he aceptado. Pero tu también no funcionó para mí. Quizás el problema es que con el navegador
    • sin pb… el restablecimiento de la hoja de estilos es una buena práctica, de todos modos.curiosidad acerca de lo que solucionó exactamente…
    • He insertado el archivo completo: vea la pregunta
    • mi problema es sobre el uso de diferentes hoja de estilos en el proyecto. así !importante ha trabajado para mí como la eliminación de la hoja de estilos.
    • Evitar !important –> smashingmagazine.com/2010/11/…

  5. 3
    h1 {
    margin-top:0;
    padding-top: 0;}

    Es’ s sólo un malentendido con h1. Usted tiene que fijar h1 margin-top y el padding-top a 0 (cero).

    • Esta es la respuesta correcta! Luchó con h1 demasiado. Gracias hombre!
  6. 0

    Parece que en realidad nadie lee tu pregunta y miró a su código fuente. He aquí la respuesta que todos hemos estado esperando:

    #header_content p {
        margin-top: 0;
    }

    jsFiddle

  7. 0

    Después de leer esto y la solución de los mismos problemas, estoy de acuerdo que esté relacionado con los encabezados (h1 por cierto, no he jugado con cualquier otro), también estilos de navegador añadiendo márgenes y rellenos con ingeniosas reglas que son difíciles de encontrar y más-ride.

    He adaptado una técnica que se utiliza para aplicar el cuadro de tamaño de la propiedad adecuadamente a los márgenes y padding. el artículo original de » box-sizing está situado en la CSS-Tricks :

    html {
    margin: 0;
    padding: 0;
    }
    *, *:before, *:after {
    margin: inherit;
    padding: inherit;
    }

    Hasta ahora es exactamente el truco para no usar el complejo se reinicia y hace que la aplicación de un diseño mucho más fácil para mí de todos modos. Espero que ayude.

  8. 0

    agregar este código al inicio de la CSS principal.

    *,html,body{
      margin:0 !important;
      padding:0 !important;
      box-sizing: border-box !important;;
    }
    • Establecer un margen cero en el elemento html interfiere con el desplazamiento en un iPad, por lo que es muy seca y pegajosa. Usted no puede desplázate hacia arriba y tener que llevar en el desplazamiento, así que ten cuidado con esto. Fina para ajustar a cero el margen de cuerpo

Dejar respuesta

Please enter your comment!
Please enter your name here