Wat te weten
- Voeg een regel toe aan uw CSS-stylesheet die alle marges en opvulwaarden van HTML-elementen op nul zet.
In dit artikel wordt uitgelegd hoe u CSS op nul zetten marges en randen zodat uw webpagina's consistent worden weergegeven in elke browser.
Normaliseren van waarden voor marges en opvulling
De beste manier om het probleem van een inconsistent boxmodel op te lossen, is door alle marges en opvulwaarden van HTML-elementen op nul te zetten. Er zijn een paar manieren waarop u dit kunt doen door deze CSS-regel aan uw stylesheet toe te voegen:
Ook al is deze regel niet specifiek, omdat hij in uw externe stylesheet staat, zal hij een hogere specificiteit hebben dan de standaard browserwaarden. Aangezien die standaardinstellingen zijn wat u overschrijft, zal deze ene stijl bereiken wat u van plan bent te doen.
Zodra u alle marges en opvulling uitschakelt, moet u ze selectief weer inschakelen voor specifieke delen van uw webpagina om de look en feel te krijgen die uw ontwerp vereist.
CSS gebruiken om randen te normaliseren
Ouder versies van Internet Explorer had een transparante of onzichtbare rand rond elementen. Tenzij u de rand op 0 zet, kan die rand uw paginalay-outs in de war brengen. Als je hebt besloten dat je deze verouderde versies van IE blijft ondersteunen, moet je dit oplossen door het volgende aan je hoofdtekst en HTML-stijlen toe te voegen:
HTML, hoofdtekst {
marge: 0px;
opvulling: 0px;
rand: 0px;
}
Net zoals u de marges en opvulling hebt uitgeschakeld, schakelt deze nieuwe stijl ook standaardranden uit. U kunt hetzelfde doen door de wildcard-selector te gebruiken die eerder in het artikel is weergegeven.
Waarom consistente marges en randen belangrijk zijn in webdesign
De webbrowser van vandaag heeft een lange weg afgelegd sinds de gekke dagen waarin elke vorm van consistentie tussen verschillende browsers wishful thinking was. De webbrowsers van tegenwoordig voldoen volledig aan de normen. Ze spelen mooi samen en leveren een redelijk consistente paginaweergave in de verschillende browsers. Dit omvat de nieuwste versies van Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari en de verschillende browsers die te vinden zijn opde talloze mobiele apparaten toegang tot websites vandaag.
Hoewel er zeker vooruitgang is geboekt met de manier waarop browsers CSS weergeven, zijn er nog steeds inconsistenties tussen deze verschillende software-opties. Een van de meest voorkomende inconsistenties is hoe die browsers standaard marges, opvulling en randen berekenen.
Omdat deze aspecten van het boxmodel van invloed zijn op alle HTML-elementen en omdat ze essentieel zijn bij het maken van een pagina lay-outs, betekent een inconsistente weergave dat een pagina er in de ene browser goed uitziet, maar er in slightly een ander. Om dit probleem te bestrijden, normaliseren veel webdesigners deze aspecten van het boxmodel. Deze praktijk is ook bekend als: op nul zetten de waarden voor marges, opvulling, en grenzen.
Een opmerking over de standaardinstellingen van de browser
Webbrowsers stellen elk standaardinstellingen in voor bepaalde weergaveaspecten van een pagina. Hyperlinks zijn bijvoorbeeld standaard blauw en onderstreept. Dit gedrag is consistent in verschillende browsers, en hoewel het iets is dat de meeste ontwerpers aanpassen aan het ontwerp behoeften van hun specifieke project, het feit dat ze allemaal met dezelfde standaardwaarden beginnen, maakt het gemakkelijker om deze te maken veranderingen. Helaas heeft de standaardwaarde voor marges, opvulling en randen niet hetzelfde niveau van consistentie tussen browsers.