margin left/right

Door jack maessen op 12-01-2013 13:59 gewijzigd op 12-01-2013 14:04

1.189 views

Kan iemand me vertellen waarom bij dit simpel html bestandje de browser zowel links als rechts een kleine margin in acht neemt tov. de background?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style>
body {
background-color: yellow;
}

#div1 {
background-color: red;
width: 100%;
height: 240px;
margin: 80px 0 0 0;
padding: 0 0 0 0;

}
</style>
</head>

<body>

<div id="div1">
           
</div>

</body>
</html>

Eddy E

12-01-2013 14:07 gewijzigd op 12-01-2013 14:08

http://jsfiddle.net/xQvrU/

Simpel dus een padding op de <body> gooien.

Optie 2:
Je kan ook met margin op de <div1> gaan werken, zoals 2%, maar dan moet je de width naar 96% brengen.

Left 2% + div 96% + right 2% = 100%;
Let even op de box-sizing: border-box;!
Zie hiervoor http://jsfiddle.net/xQvrU/1/

jack maessen

12-01-2013 14:23

Het probleem is al verholpen als in de body staat: margin: 0;
Als je dit niet erin zet, heb je zowel li als re een kleine marge van je div ten opzichte van de body.
Hieruit concludeer ik:
Als je de margin van de body niet op 0 zet, heeft ie bij default blijbaar zowel naar li als re een nagatieve marge?? ja toch...

Eddy E

12-01-2013 14:26

Euh.... nee, <body> heeft standaard geen negatieve margin, maar een kleine positieve.

Sowieso: google even op reset.css (van Eric Meyer).
2 regels CSS's die alle zooi opruimen van browsers naar 1 standaard.
Kan ook met andere CSS-regels als normalize.css

jack maessen

12-01-2013 14:29

oke, is me duidelijk
dank voor uitleg

Reageren

Inloggen om te reageren