Archief - CSS: box model

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
M

MangleR

Legacy Member
vraagje ivm het box model

wat bepaalt nu eigenlijk de width van een div

is dit de width + padding
of zonder de padding
of anders...

ik bedoel hiermee
als je bv een div wilt die 200 px breed is, en een padding nodig heeft van 5 px (links en rechts)
moet je dan in je css zetten width 190 en padding 5
of width 200?

(extraatje :p is het hetzelfde in FF en IE ?)
K

KoenDK

Legacy Member
die padding is toch de binnenkant?
met andere woorden

div van 200 is 200 breed

5 padding , zal de spatie bepalen middenin
M

MangleR

Legacy Member
ah ok
dus hoe meer padding, hoe minder plaats binnenin u kot. en niet hoe groter uwen totalen box.
en wat met de border width? als je border bv 5 is tov 20. dan maakt dit ook enkel uit voor de inhoud van uw box.(dus geen invloed op uw totale breedte)
F

Fr3aK

Legacy Member
Als ge in IE een width van 200px gebruikt met een padding (L & R) van 5px is uwen div eigenlijk 210px breed.
In FF blijft uwen div 200px breed met een padding (L & R) van 5px.

Dus in IE is de width eigenlijk de gespecifieerde width + padding, in FF blijft dat gewoon de gespecifieerde width.

Daarom werk ik meestal met margins als ik met fixed widths moet werken...
C

Cakeman

Legacy Member
Als je het juiste doctype gebruikt, dan gebruikt IE 6 bijna hetzelfde box model als Firefox. Ik gebruik nog maar onderstaande declaratie (Visual Studio 2005 zet die er automatisch) en ik merk toch dat IE alles nu beter interpreteert. Voordien gebruikte ik in CSS vaak de "!important" hack, maar die heb ik nu niet meer nodig.

Code: 
<!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" >

</html>

De effectieve breedte van een div = width + padding + border.
Wanneer je een div wilt die 200 pixels breed is, met een border van 1px en een padding van 5px, dan moet je als width '188px' opgeven.
o

omfg

Legacy Member
Fr3aK zei:
Als ge in IE een width van 200px gebruikt met een padding (L & R) van 5px is uwen div eigenlijk 210px breed.
In FF blijft uwen div 200px breed met een padding (L & R) van 5px.

Dus in IE is de width eigenlijk de gespecifieerde width + padding, in FF blijft dat gewoon de gespecifieerde width.
Klik om te vergroten...
ik dacht toch dat het juist omgekeerd was :oink:
F

Fr3aK

Legacy Member
My bad, het is inderdaad omgekeerd, beetje verkeerd geformuleerd...
M

MangleR

Legacy Member
Fr3ak zei:
Als ge in IE een width van 200px gebruikt met een padding (L & R) van 5px is uwen div eigenlijk 210px breed.
In FF blijft uwen div 200px breed met een padding (L & R) van 5px.

Dus in IE is de width eigenlijk de gespecifieerde width + padding, in FF blijft dat gewoon de gespecifieerde width.

Daarom werk ik meestal met margins als ik met fixed widths moet werken...
Klik om te vergroten...
omfg zei:
ik dacht toch dat het juist omgekeerd was
Klik om te vergroten...


dus als ik het nu goed begrijp is in
IE de width , de width + padding
FF gewoon de width
F

Fr3aK

Legacy Member
Hmm, heb ier even wat getest:
Code: 
div {
  width: 200px;
  padding: 5px;
}
geeft u in IE6.0 en FF2.0 een breedte van 210px met eenders welke DTD (xHTML1.0 - 1.1, Strict - Transitional).

Ik dacht altijd dat IE en FF elk een andere box model gebruikten?
F

FLuoKaBouTeR

Legacy Member
IE 6 heeft daar geen last meer van dacht ik.
Vooral IE 5.
Ge kunt dat simuleren in 6 door uw doctype declaratie weg te halen en in de zogenaamde quirks mode te werken.
X

Xavez

Legacy Member
Waar stickies al niet goed voor zijn:

Allow Block Elements to Fill Their Space Naturally

My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. Dealing with the box model can be such a pain, especially if you're dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.
Klik om te vergroten...
Snook.ca
o

orez

Legacy Member
hetgeen het meest wordt gebruikt en toegepast om toch zonder al te veel problemen hetzelfde in IE & FF te bekomen is uw div een bepaalde breedte te geven, zonder enige padding ofzo, en uw elementen die binnenin de div komen te gaan positioneren met margin.

Als gij nu ne p of ne li of whatever binnen uw div zet met 5px margin, geeft da hetzelfde effect alsof gij uw padding van die div op 5px zou zetten... + uw box vergroot dan niet ofzo, dus minder problemen :p

*edit: oh typ ik nu net da engels dingske van hierboven ma int nederlands -_- , nuja soit, das dus de manier ook waarop ik werk, tis eigenlijk ook vrij logisch hé als ge erover nadenkt.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan