[Opera + CSS] Body margin (eddie? :D)

M@rco · **27-08-2002, 13:51**

Ik probeer in Opera (6.05) de body margin op 0 te zetten. En wel met het volgende stukje CSS:

Code:

Body {
	background-color: #000000;
	margin: 0px;
}

't Werkt alleen niet echt. De pagina blijft op de één of andere manier een marge behouden, aan alle kanten.

Bug in Opera? Iemand enig idee?

**27-08-2002, 13:57**

margin: 0px 0px 0px 0px;

boven, rechts, onder, links [als ik het goed heb]

**27-08-2002, 13:57**

Citaat:

topcititel

(eddie? )

LOL

Maar wat wil je setten?
margin is de ruimte tussen 2 HTML elementen.
padding is de ruimte tussen het element en de inhoud van het element (de tekst meestal).

[edit]
Wel vreemd dat Mozilla 1.0 het fout doet

[flame-mode]
Van IE had ik niet anders verwacht

[/flame-mode]

[/edit]

**27-08-2002, 14:04**

Citaat:

McLaren schreef:
margin: 0px 0px 0px 0px;

boven, rechts, onder, links [als ik het goed heb]

Dit mag niks uitmaken, omdat alle waardes gelijk zijn. Het is gewoon een verkorte schrijfwijze.

* margin: 0px

staat gelijk aan
* margin: 0px 0px

staat gelijk aan
* margin: 0px 0px 0px

staat gelijk aan
* margin: 0px 0px 0px 0px

staat gelijk aan
* margin-top: 0px;
* margin-right: 0px;
* margin-bottom: 0px;
* margin-left: 0px;

**27-08-2002, 14:13**

ok, weer wat geleerd

M@rco · **27-08-2002, 14:18**

Citaat:

eddie schreef:

LOL

Maar wat wil je setten?
margin is de ruimte tussen 2 HTML elementen.
padding is de ruimte tussen het element en de inhoud van het element (de tekst meestal).

Ik wil dus de ruimte tussen zeg maar de inhoud van de pagina, en de randen van het browservenster setten. Wat je ook zo kan doen:

<body topmargin="0" leftmargin="0" etc.>

M@rco · **27-08-2002, 14:21**

Ehh.. laat maar, 't werkt ineens

Had, na jou post gelezen te hebben, ook de padding op 0px gezet. En, krijg nou wat, het werkt

Bedankt

**27-08-2002, 14:30**

Ik zie geen verschil in Opera en IE hoor (behalve dat Opera om de stukken links een rechter en onder rand heeft).

Om de ruimte tussen de rand van de body en de inhoud op 0px te zetten, moet je dus padding gebruiken:

Code:

<style type="text/css">
body{ padding: 0px; }
</style>

Kijk anders voor meer informatie bij het box-model

Wil je wat 'grappigs' zien met padding en margin, copy+paste de volgende code eens

Code:

<style type="text/css">
html
{ 
 background-color: blue; 
 padding: 5em;
}

body 
{
 background-color: #000000;
 margin: 0px;
 color: #FFFFFF;
 padding: 5em;
 border: 1px solid yellow;
}

span
{
 margin: 0px; 
 padding: 0px; 
 border: 1px solid red; 
 background-color: white; 
 color: black
}
</style>

en zet tussen je body-tags even

Code:

<span>Blablabla testje blablabal</span>

Kijk vervolgens naar het verschil in IE en Moz en Opera

**27-08-2002, 14:32**

Citaat:

McLaren schreef:
ok, weer wat geleerd

Beter nog:

Citaat:

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

http://www.w3.org/TR/REC-CSS2/box.ht...ing-properties

M@rco · **27-08-2002, 14:37**

Citaat:

eddie schreef:
Ik zie geen verschil in Opera en IE hoor (behalve dat Opera om de stukken links een rechter en onder rand heeft).

Nope.. ik zei al, met die padding op 0px doet 'ie het wel

Citaat:

eddie schreef:
Wil je wat 'grappigs' zien met padding en margin, copy+paste de volgende code eens

Code:

<style type="text/css"> html { background-color: blue; padding: 5em; } body { background-color: #000000; margin: 0px; color: #FFFFFF; padding: 5em; border: 1px solid yellow; } span { margin: 0px; padding: 0px; border: 1px solid red; background-color: white; color: black } </style>

en zet tussen je body-tags even

Code:

<span>Blablabla testje blablabal</span>

Kijk vervolgens naar het verschil in IE en Moz en Opera

Ik zie weinig verschil

**27-08-2002, 14:39**

Citaat:

M@rco schreef:
Ehh.. laat maar, 't werkt ineens

Had, na jou post gelezen te hebben, ook de padding op 0px gezet. En, krijg nou wat, het werkt

Bedankt

Jaaaa, zeg! Zit ik een heel verhaal te typen...

**27-08-2002, 14:40**

Citaat:

M@rco schreef:

Ik zie weinig verschil

Tussen Mozilla en Opera is geen verschil.

Echter als je het opent in IE 6 wel

(wel de <style..> in de head zetten he

)

M@rco · **27-08-2002, 14:42**

Citaat:

eddie schreef:

Tussen Mozilla en Opera is geen verschil.

Echter als je het opent in IE 6 wel (wel de <style..> in de head zetten he )

Jaja, ik kan wel íets hoor

Oke, is er zijn wat kleine verschillen... maar als je daar niet op let zie je het nauwelijks

**27-08-2002, 14:45**

Citaat:

M@rco schreef:
Jaja, ik kan wel íets hoor

Oke, is er zijn wat kleine verschillen... maar als je daar niet op let zie je het nauwelijks

http://www.erikdokter.nl/test/test13.html

M@rco · **27-08-2002, 14:47**

Citaat:

eddie schreef:

http://www.erikdokter.nl/test/test13.html

o_O

Bij mij zag 'ie er net echt anders uit... naja, zal wel.. dit ziet er wel vaag uit

**27-08-2002, 14:56**

Citaat:

eddie schreef:

http://www.erikdokter.nl/test/test13.html

Ik heb hem even ietsjes veranderd om padding beter te laten zien.

Wat moet je zien:
Een fel-groene rand om de 'canvas' (het html element).
5em daarbinnen (padding: 5em) bevindt zich het body element.
Het body element is zwart met een gele rand.
5em binnen de body zit het div element (body-> padding: 5em).
Het div element heeft een margin van 5em. Daardoor is de ruimte tussen de body en div 10em (want de afstand body->inhoud body is 5em (padding: 5em), en aangezien de div in de inhoud staat en deze een margin heeft van 5em, schuift het element nog 5em naar beneden en links), het dubbele van de ruimte tussen html en body (wat dus 5em is).
Het div element is wit met een rode rand en zwarte letters.
De letters sluiten direct aan op de rand (padding: 0px).
De hoogte van de inhoud van het div element is 200px;

De fel-groene rand is dus de rand van het HTML-element. Zie het verschil in Opera en Mozilla

(en IE, maar die bakt er toch niks van

)

27-08-2002, 13:57
Verwijderd	margin: 0px 0px 0px 0px; boven, rechts, onder, links [als ik het goed heb]

27-08-2002, 14:21
M@rco	Ehh.. laat maar, 't werkt ineens Had, na jou post gelezen te hebben, ook de padding op 0px gezet. En, krijg nou wat, het werkt Bedankt __________________ What experience and history teach is this — that people and governments never have learned anything from history, or acted on principles deduced from it.

Advertentie