webentwicklung-frage-antwort-db.com.de

CSS Margin: setzt nicht auf

Ich bin ein Neuling im Webdesign. Ich habe mein Webseitenlayout mit CSS und HTML erstellt (siehe unten). Das Problem ist, obwohl ich den Rand auf 0 eingestellt habe, der obere Rand nicht auf 0 eingestellt ist und etwas Platz lässt. Wie kann ich diesen weißen Bereich löschen?

Screenshot des Problems

There's a space in top

Style Sheet 

<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>

Hier ist die ganze Datei 

<!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>
htmlcssmargin
19
Nipuna

Versuchen...

body {
   margin: 0;
   padding: 0;
}

jsFiddle .

Aufgrund von Browsern, die unterschiedliche Standard-Stylesheets verwenden, empfehlen einige Leute ein reset -Stylesheet, z. B. Eric Meyers Reset Reloaded .

31
alex

Sie müssen die tatsächliche Seite auf margin: 0 und padding: 0 auf die tatsächliche HTML-Datei einstellen, nicht nur auf den Hauptteil.

verwenden Sie dies in Ihrem CSS-Stylesheet.

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

dadurch wird die gesamte Seite auf 0 gesetzt, um einen neuen, sauberen Start ohne Rand und Füllungen zu erhalten.

20
Dan G

sie sollten entweder (oder beides) haben:

  1. ein paddding! = 0 am körper
  2. eine Marge! = 0 auf #header 

versuchen 

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

Die margin ist das "Leerzeichen" außerhalb die Box, die padding ist das "Leerzeichen" inside die Box (zwischen dem Rand und dem Inhalt) . Das !important verhindert das Überschreiben von Eigenschaften durch letztere Regeln . 

4
Yannick Loiseau

Versuchen

html, body{
  margin:0 !important;
  padding:0 !important;
}
3
Hussein
h1 {
margin-top:0;
padding-top: 0;}

Es ist nur ein Missverständnis mit dem Tag h1. Sie müssen h1-Tag margin-top und padding-top auf 0 (null) setzen.

3
alter

Es scheint, dass niemand Ihre Frage tatsächlich gelesen und Ihren Quellcode betrachtet hat. Hier ist die Antwort, auf die Sie alle gewartet haben:

#header_content p {
    margin-top: 0;
}

jsFiddle

0
Zectbumo

Nachdem ich dies gelesen und die gleichen Probleme gelöst habe, stimme ich zu, dass es sich um Überschriften handelt (sicher h1, nicht mit anderen gespielt), auch Browser-Styles, die Ränder und Füllungen mit intelligenten Regeln hinzufügen, die schwer zu finden und zu überschreiben sind.

Ich habe eine Technik angepasst, mit der die Box-Size-Eigenschaft richtig auf Ränder und Polsterungen angewendet wird. Der Originalartikel für die Box-Dimensionierung befindet sich unter CSS-Tricks :

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

Bislang ist es genau der Trick, keine komplexen Resets zu verwenden, und macht mir das Anwenden eines Designs viel einfacher. Ich hoffe es hilft.

0
user7362925

fügen Sie diesen Code zum Start des Haupt-CSS hinzu. 

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}
0
HarshSigma