Div “Margens Padrão” do nada

StackOverflow https://stackoverflow.com/questions/1177675

  •  19-09-2019
  •  | 
  •  

Pergunta

Mesmo depois de muitas linhas que escrevi no CSS e HTML, o CSS -Behaviour ainda consegue me surpreender - de uma maneira ruim.

Eu estava montando um site de amostra para um amigo mostrar a ele como ele poderia construir seu layout, mas o Firefox 3.0.5 e o IE8 criam margens entre meus #Header, #Content e #Footer-Divs do nada. Se eu alternar no modo IE7, as margens desaparecem.

CSS:

html, body {
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
}

#page {
   background-image: url('bg_gradiant.png');
   background-repeat: repeat-y;
   width: 950px; /* 770px + 2 * 90px; */
   margin: 0 auto;
   padding-left: 90px;
}

#header {
   width: 770px;
   margin: 0;
   padding: 0;
}

#header #row1 {
   background-color: #9ab3ba;
   height: 50px;
}
#header #row2 {
   background-color: #517279;
   height: 50px;
}

#content {
   width: 770px;
   background-color: #d7e9ed;
}

#footer {
   background-color: #5eb6cc;
   width: 770px;
   height: 150px;
}

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Test</title>
</head>
<body>
<div id="page">
   <div id="header">
      <div id="row1"></div>
      <div id="row2"></div>
   </div>
   <div id="content">
      <p style="height: 600px">Beware of the Content</p>
   </div>
   <div id="footer">
   </div>
</div>
</body>
</html>

Você pode visualizar esta página aqui: https://codepen.io/lx-s/pen/erropl

Navegando através das ferramentas de desenvolvedor do IE e Firebug me mostrou que eles não eram valores de margem padrão definidos para esses div, mas, como se pode ver, eles estão lá. Espero que você possa me dar uma sugestão de como se livrar deles - isso está me deixando muito louco.

Desde já, obrigado!

Foi útil?

Solução

Não é a div, mas a tag P que tem a margem definida por padrão. Eu testei configurá -lo para 0 e o espaço desapareceu.

Outras dicas

Adicione o seguinte à sua folha de estilo:

* {
    margin: 0;
}

As margens estão na etiqueta P no #Content Div

Espero que isso ajude você um pouco

Você precisa usar um CSS de redefinição. Você deve fazer isso em todas as páginas/site que desenvolve. Um bom CSS de redefinição removerá muitas das configurações padrão e fará com que o navegador pareça muito menos indolor.

Existem vários desses em torno de Eric Meyer ou o Yahoo UI Redefinir CSS.

Quando eu já vi isso antes, adicionei um fundo de preenchimento: 1px na parte inferior da div, para que eu possa manter as margens nos parágrafos

espero que ajude

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top