Div "Standardmargen" aus dem Nichts

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

  •  19-09-2019
  •  | 
  •  

Frage

Selbst nach vielen Zeilen, die ich in CSS und HTML geschrieben habe, schafft es das CSS -Behaviour immer noch, mich auf schlechte Weise zu überraschen.

Ich habe eine Beispielstelle für einen Freund zusammengestellt, um ihm zu zeigen, wie er sein Layout bauen konnte, aber Firefox 3.0.5 und IE8 erstellen Margen zwischen meinem #Header, #Content und #Fußzeile aus dem Nichts. Wenn ich im IE7 -Modus wechsle, verschwinden die Ränder.

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>

Sie können diese Seite hier anzeigen: https://codepen.io/lx-s/pen/erropl

Das Durchsuchen der IE-Entwicklerwerkzeuge und Firebug zeigte mir, dass sie keine Standard-Margin-Werte waren, die für diese Divs festgelegt wurden, aber wie man sehen kann, sind sie da. Ich hoffe, Sie können mir einen Hinweis geben, wie Sie sie loswerden können - es macht mich ernsthaft verrückt.

Danke im Voraus!

War es hilfreich?

Lösung

Es ist nicht das DIV, sondern das P -Tag, das standardmäßig den Rand festgelegt hat. Ich habe es getestet, es auf 0 zu setzen und der Raum verschwand.

Andere Tipps

Fügen Sie Ihrem Stylesheet Folgendes hinzu:

* {
    margin: 0;
}

Die Ränder sind am P -Tag im #Content Div

Hoffe das hilft dir ein wenig

Sie müssen ein Reset -CSS verwenden. Sie sollten dies auf jeder Webseite/auf jeder Website tun, die Sie entwickeln. Ein gutes Reset-CSS entfernen viele der Standardeinstellungen und lässt Cross-Browser viel weniger schmerzlos aussehen und sich anfühlen.

Es gibt einige davon um, wie z. Eric Meyer oder der Yahoo UI Reset CSS zurückgesetzt.

Als ich das schon einmal gesehen habe, habe ich ein Polsterboden hinzugefügt: 1PX am unteren Rand des enthaltenden DIV, damit ich die Ränder am Absatz behalten kann

Ich hoffe, das hilft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top