Artikelen » (x)HTML, XML en CSS » Artikel
Padding en Margin
26-11-2011 13:10
Padding en Margin
Heel veel mensen komen aan met het probleem dat hun website in Mozilla Firefox goed is, maar in Internet explorer kloppen de maten niet meer, of juist andersom. Bijna altijd komt dit probleem door het gebruiken van margins en paddings. Waarom deze verschillen er zijn, en hoe je ze kan oplossen, zal ik in dit artikelen bespreken.
Hoe lossen we dit probleem op?
Om dit uit te leggen gaan we denken als een webbrowser. Ik zal hiervoor dus per browser uitleggen hoe deze "denkt".
Internet explorer:
Hierbij kan je deze formule nemen: content = totale_breedte - border - padding
Ingevuld krijg je dan: content = 230 - 30 - 20 = 180 pixels
Dit betekend dus dat het plaatje nog steeds 230 pixels breed is, maar het tekstvlak maar 180 pixels breed.
Firefox
Hierbij kan je deze formule nemen: totale_breedte = content + border + padding
Ingevuld krijg je dan: totale_breedte = 230 + 30 + 20 = 280 pixels
Je ziet dus dat internet explorer de 230 pixels gebruikt als de totale breedte, en Firefox de 230 pixels gebruikt voor het tekstvlak (content).
De oplossing:
Gebruik hiervoor een doctype.
Het doctype is een eis dat X(HT)ML stelt aan alle documenten die in deze taal geschreven worden. In feite zijn het de vastgestelde regels voor de syntaxis van je document. Oftewel, hierin wordt vastgelegd welke opdracht welke tag moet uitvoeren.
Een doctype ziet er ongeveer zo uit:
Heel veel mensen komen aan met het probleem dat hun website in Mozilla Firefox goed is, maar in Internet explorer kloppen de maten niet meer, of juist andersom. Bijna altijd komt dit probleem door het gebruiken van margins en paddings. Waarom deze verschillen er zijn, en hoe je ze kan oplossen, zal ik in dit artikelen bespreken.
Hoe lossen we dit probleem op?
Om dit uit te leggen gaan we denken als een webbrowser. Ik zal hiervoor dus per browser uitleggen hoe deze "denkt".
Internet explorer:
Hierbij kan je deze formule nemen: content = totale_breedte - border - padding
Ingevuld krijg je dan: content = 230 - 30 - 20 = 180 pixels
Dit betekend dus dat het plaatje nog steeds 230 pixels breed is, maar het tekstvlak maar 180 pixels breed.
Firefox
Hierbij kan je deze formule nemen: totale_breedte = content + border + padding
Ingevuld krijg je dan: totale_breedte = 230 + 30 + 20 = 280 pixels
Je ziet dus dat internet explorer de 230 pixels gebruikt als de totale breedte, en Firefox de 230 pixels gebruikt voor het tekstvlak (content).
De oplossing:
Gebruik hiervoor een doctype.
Het doctype is een eis dat X(HT)ML stelt aan alle documenten die in deze taal geschreven worden. In feite zijn het de vastgestelde regels voor de syntaxis van je document. Oftewel, hierin wordt vastgelegd welke opdracht welke tag moet uitvoeren.
Een doctype ziet er ongeveer zo uit:
Code | Selecteer Alles |
|---|
|