• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Unterschied zwischen margin und padding im body

C

Corraggiouno

Mitglied
Hallo mein HTML-Code:
Code: 
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>

<div id="box">
hallo

</div>
</body>
</html>

mein css-code
Code: 
body {
margin:0px;
padding:50px; 
}

#box {
background: #ffffff;
border: 1px solid blue;
font-family: Verdana;
font-size: 12px;
color: #333; 
position:relative;
margin: 0px auto;
width: 500px;
height: 600px;
padding-left:10px;
}
Kann mir jemand den Unterschied zwischen margin und padding im Body-Bereich erklären? ......also wenn ich z.b. für margin 50 px und für padding:0px eingebe, also genau anders herum, erziele ich das gleiche ergebnis!
 
Margin ist Außenabstand, Padding ist Innenabstand. Würdest du z.B. Margin verwenden und dem Body dann eine Hintergrundfarbe geben, würde die nicht bis ganz zum Rand reichen, weil der Body außen einen Abstand zum Rand des beinhaltenden Elements (html) hat.
 
ok, das mit der Farbe habe ich verbessert, aber von den px hat sich nichts verändert.
Ob ich jetzt:
Code: 
body {
background-color:grey;
margin:0px;
padding:50px;
}
oder
Code: 
body {
background-color:grey;
margin:50px;
padding:0px;
}
Optisch ist kein Unterschied zu sehen!
 
Um das zu sehen, musst du html offenbar auch explizit eine Hintergrundfarbe zuweisen, sonst wird die für den Body für das ganze Dokument verwendet. Siehe hier.
 
ja, aber das habe ich doch getan
Code: 
#box {
background-color: #ffffff;
border: 2px solid red;
font-family: Verdana;
font-size: 12px;
color: green;
position:absolut; 
margin: 0px auto;
width: 500px;
padding-left:0px;
padding-right:0px;
}
Der background ist weiss!
 
Nochmal zur Verdeutlichung:
Margin ist der Außenabstand.
Definiere mal

Code: 
body {
background: gray;
margin: 50px;
border: 1px solid red;
}

und HTML:
Code: 
<body>
Body mit 50px margin.
</body>
In diesem Beispiel hat der rote Rahmen 50px von oben, links und rechts Abstand.
Wenn du alles mit Text füllst, dann ebenso 50px von unten.


Zweites Beispiel:
CSS
Code: 
body {
background: gray;
margin: 0px;
padding: 50px;
border: 1px solid yellow;
}

HTML
Code: 
<body>
Body mit 50px padding.
</body>

In diesem Fall grenzt der gelbe Rahmen an den Bildschirm-Fensterrand.
Der Text innerhalb von body hat jedoch einen Innen-Abstand zum Rahmen von 50px.
Im ersten Beispiel ist der Text dagegen unmittelbar vom Rahmen umgeben.
 
vielen dank für deine geduld. bin mal massiv auf der leitung gestanden. Ich hätte mir einfach das mal mit border verdeutlichen sollen.
Dankeschön!
 
Schön, wenn der kleine Rahmen dazu beitragen konnte, das Problem zu verdeutlichen :wink:

Padding verwendet man meist, damit der Text oder sonstige Inhalt nicht so am Rand eines Elements klebt.

Mit margin positioniert man dagegen die Elemente selbst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben