CSS beschrijving eigenschap padding

Handleiding HTML Legenda | Voorbeelden | Padding | CSS eigenschappen | Begin


padding


CSS 1
IE 4.0
NN 4.0
MOZ 1.0
FF 1.0
OP 3.5
De padding eigenschap bepaalt de afstand die vrijgehouden wordt tussen de inhoud en de verschillende randen van een element.

Waarden: [<lengte> | <percentage>]{1,4} | inherit
Beginwaarde: wordt bepaald door de afzonderlijke eigenschappen padding-top, padding-right, padding-bottom en padding-left.
Heeft betrekking op: alle elementen behalve elementen waarvoor de display eigenschap één van de waarden table-row-group, table-column, table-column-group, table-header-group, table-footer-group en table-row heeft.
Wordt geërfd: nee
Mediagroep(en): visual

De eigenschap is een verkorte weergave van de eigenschappen padding-top, padding-right, padding-bottom en padding-left.

De waarden lengte en percentage kunnen één, twee, drie of vier keer worden opgenomen. Wanneer één waarde wordt opgenomen dan geldt deze voor de vrij te houden ruimte aan alle vier zijden. Wanneer twee waarden zijn opgenomen, dan geldt de eerste voor de vrij te houden ruimte aan de boven- en onderkant en de tweede voor de vrij te houden ruimte aan de rechter- en linkerkant. Wanneer drie waarden zijn opgenomen, dan geldt de eerste waarde voor de vrij te houden ruimte aan bovenkant, de tweede waarde voor vrij te houden ruimte aan zowel de rechter- als de linkerkant en de derde waarde voor de vrij te houden ruimte aan onderkant. Wanneer vier waarden zijn opgenomen, dan geldt als volgorde boven, rechts, onder en links. De waarden lengte en percentage mogen ook gecombineerd gebruikt worden.

De waarde inherit heeft betrekking op alle vier randen en mag slechts één keer en bovendien niet in combinatie met andere waarden worden opgenomen.

De voor het element vastgelegde achtergrond heeft ook betrekking op de padding.

De voor een inline element vastgelegde padding aan de boven- en onderzijde heeft geen invloed op de regelhoogte. De padding kan daardoor de inhoud van het document boven of onder het element overlappen.

In CSS 2 kon de eigenschap gebruikt worden voor alle elementen, in CSS 2.1 niet meer voor elementen die bedoeld zijn om rijen, rijgroepen, kolommen en kolomgroepen te definiëren.

Voorbeelden:

padding: 1.5em;

padding: 10px 20px;

padding: 2em 0px 2em 10%;
<lengte>
CSS: 1 IE: 4.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Een negatieve waarde is niet toegestaan.
<percentage>
CSS: 1 IE: 4.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

Een percentage wordt uitgedrukt als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het bevattend blok (vaak is dat het meest dichtbijgelegen voorouder element op blokniveau, waarin het element is opgenomen). Een negatieve waarde is niet toegestaan.
inherit
CSS: 2 IE: - NN: 6.0 MOZ: 1.0 FF: 1.0 OP: ?

De waarde van het parent element wordt aangehouden.


Bijzonderheden ondersteuning

Microsoft Internet Explorer 4.0
- De eigenschap wordt niet ondersteund voor inline elementen (waaronder het IMG element).
- Wanneer de eigenschap is opgenomen voor het TABLE element, dan wordt de padding niet aangehouden voor de tabel zelf maar voor de cellen van de tabel.
- Wanneer de eigenschap (anders dan bedoeld) is opgenomen voor de elementen TR, THEAD, TBODY, TFOOT, COL en COLGROUP, dan wordt de padding aangehouden voor de cellen van de tabel.
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan wordt indien nodig de breedte van de tabel zelf (en dus de breedte van de cellen) vergroot om de box van het bijschrift voldoende breed te maken voor de tekst en de padding links en rechts.
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
- Wanneer de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "text" of "password" heeft (dus als het gaat om een tekst- of een wachtwoordveld), dan wordt de hoogte van het veld niet aangepast aan de extra ruimte die de padding vraagt. Een eventuele standaard tekst die is opgegeven met het VALUE attribuut, kan daardoor geheel of gedeeltelijk onzichtbaar worden.
Microsoft Internet Explorer 5.0
- De eigenschap wordt niet ondersteund voor inline elementen (waaronder het IMG element).
- De eigenschap wordt niet ondersteund voor het TABLE element.
- Wanneer de eigenschap (anders dan bedoeld) is opgenomen voor de elementen COL en COLGROUP, dan wordt de padding aangehouden voor de cellen van de tabel.
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan wordt indien nodig de breedte van de tabel zelf (en dus de breedte van de cellen) vergroot om de box van het bijschrift voldoende breed te maken voor de tekst en de padding links en rechts.
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
Microsoft Internet Explorer 5.5
- De eigenschap wordt niet ondersteund voor het IMG element.
- De eigenschap wordt niet ondersteund voor het TABLE element.
- Wanneer de eigenschap (anders dan bedoeld) is opgenomen voor de elementen COL en COLGROUP, dan wordt de padding aangehouden voor de cellen van de tabel.
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan wordt indien nodig de breedte van de tabel zelf (en dus de breedte van de cellen) vergroot om de box van het bijschrift voldoende breed te maken voor de tekst en de padding links en rechts.
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
- Wanneer de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "text" of "password" heeft (dus als het gaat om een tekst- of een wachtwoordveld), dan wordt de hoogte van het veld niet aangepast aan de extra ruimte die de padding vraagt. Een eventuele standaard tekst die is opgegeven met het VALUE attribuut, kan daardoor geheel of gedeeltelijk onzichtbaar worden.
Microsoft Internet Explorer 6.0
- De eigenschap wordt niet ondersteund voor het TABLE element.
- Wanneer de eigenschap (anders dan bedoeld) is opgenomen voor de elementen COL en COLGROUP, dan wordt de padding aangehouden voor de cellen van de tabel.
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan wordt indien nodig de breedte van de tabel zelf (en dus de breedte van de cellen) vergroot om de box van het bijschrift voldoende breed te maken voor de tekst en de padding links en rechts.
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION.
- De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
Netscape Navigator 4.x
- De padding heeft niet de achtergrond van het element, behalve als er ook een rand is gedefinieerd met de eigenschappen voor randen.
- Wanneer er zowel een padding als een rand zijn gedefinieerd voor een element, dan wordt tussen beiden een ruimte van 3 pixels vrijgehouden die niet de achtergrond van het element heeft.
- Wanneer de eigenschap is opgenomen voor inline elementen, dan worden deze behandeld als elementen op blokniveau.
- Wanneer de eigenschap is opgenomen voor het TABLE element, dan wordt de padding niet aangehouden voor de tabel zelf maar voor de cellen van de tabel.
- Wanneer de eigenschap is opgenomen voor de elementen TD of TH dan wordt de padding links en rechts wel aangehouden bij de berekening van de breedte van de cel, maar de inhoud wordt tegen de linkerrand van de cel geplaatst. De padding aan de boven- en onderzijde wordt geheel genegeerd.
- De eigenschap wordt niet ondersteund voor het CAPTION element.
- Het opnemen van de eigenschap voor verschillende elementen voor lijsten (LI, DT of DD), formulieren (SELECT, OPTION, INPUT en TEXTAREA) en afbeeldingen (IMG) heeft vaak dramatische gevolgen. Soms (bij LI, DT, DD, INPUT en IMG) wordt de padding niet aangehouden voor het element zelf, maar wordt erboven of eronder een lege box geplaatst, waarvan de grootte bepaald wordt door de som van de padding links en rechts en de padding boven en onder. Een eventueel gedefinieerde rand wordt om deze lege box geplaatst, de achtergrond wordt genegeerd. In andere gevallen (bij SELECT, OPTION en TEXTAREA) verliest het element zijn functie (en is het niet meer mogelijk een optie uit de lijst te selecteren of tekst in te voeren). Ook kan het element op een andere plaats in het document geplaatst worden dan bedoeld (IMG), of de weergave van latere delen van het document blokkeren (OPTION).
Netscape Navigator 6.0
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan krijgt de box van het bijschrift de breedte die nodig is voor de tekst en de padding links en rechts. De tabel zelf houdt de normale breedte en kan daardoor smaller zijn dan de box van het bijschrift.
- Als de eigenschap is opgenomen voor het OPTION element, dan wordt de opgegeven padding ook aangehouden bij het bepalen van de afmetingen van de ingeklapte keuzelijst. De tekst wordt echter in de linker bovenhoek geplaatst.
Netscape Navigator 6.1 t/m 7.0  |  Mozilla 1.0 t/m 1.2
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan krijgt de box van het bijschrift de breedte die nodig is voor de tekst en de padding links en rechts. De tabel zelf houdt de normale breedte en kan daardoor smaller zijn dan de box van het bijschrift.
- Als de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "checkbox" heeft, dan wordt de padding weergegeven, maar kan het aankruisvakje niet meer geselecteerd worden.
- Als de eigenschap is opgenomen voor het SELECT element, dan wordt bij het bepalen van de afmetingen van de ingeklapte keuzelijst alleen rekening gehouden met de opgegeven padding aan de boven- en onderzijde. De breedte in horizontale richting wijzigt niet. Bij de plaatsing van de tekst op de ingeklapte keuzelijst wordt de padding links en rechts wel aangehouden. Daardoor is er onvoldoende ruimte om de tekst geheel weer te geven en valt een deel weg.
- Als de eigenschap is opgenomen voor het OPTION element, dan wordt de opgegeven padding ook aangehouden bij het bepalen van de afmetingen van de ingeklapte keuzelijst. De tekst wordt echter in de linker bovenhoek geplaatst.
Netscape Navigator 7.1  |  Mozilla 1.3 t/m 1.5
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan krijgt de box van het bijschrift de breedte die nodig is voor de tekst en de padding links en rechts. De tabel zelf houdt de normale breedte en kan daardoor smaller zijn dan de box van het bijschrift.
- Als de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft, dan wordt (als daarvoor waarden zijn opgegeven) aan de boven- en onderzijde geen padding weergegeven, maar in plaats ervan het keuzerondje of aankruisvakje vergroot. Een eventuele padding links en/of rechts wordt wel weergegeven.
- Als de eigenschap is opgenomen voor het SELECT element, dan wordt bij het bepalen van de afmetingen van de ingeklapte keuzelijst alleen rekening gehouden met de opgegeven padding aan de boven- en onderzijde. De breedte in horizontale richting wijzigt niet. Bij de plaatsing van de tekst op de ingeklapte keuzelijst wordt de padding links en rechts wel aangehouden. Daardoor is er onvoldoende ruimte om de tekst geheel weer te geven en valt een deel weg.
- Als de eigenschap is opgenomen voor het OPTION element, dan wordt de opgegeven padding ook aangehouden bij het bepalen van de afmetingen van de ingeklapte keuzelijst. De tekst wordt echter in de linker bovenhoek geplaatst.
Netscape Navigator 7.2 en hoger  |  Mozilla 1.6 en hoger  |  Firefox
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan krijgt de box van het bijschrift de breedte die nodig is voor de tekst en de padding links en rechts. De tabel zelf houdt de normale breedte en kan daardoor smaller zijn dan de box van het bijschrift.
- De eigenschap wordt niet ondersteund voor een INPUT element, waarvan het TYPE attribuut de waarde "radio" of "checkbox" heeft (dus als het gaat om een keuzerondje of een aankruisvakje).
- Als de eigenschap is opgenomen voor het SELECT element, dan wordt bij het bepalen van de afmetingen van de ingeklapte keuzelijst alleen rekening gehouden met de opgegeven padding aan de boven- en onderzijde. De breedte in horizontale richting wijzigt niet. Bij de plaatsing van de tekst op de ingeklapte keuzelijst wordt de padding links en rechts wel aangehouden. Daardoor is er onvoldoende ruimte om de tekst geheel weer te geven en valt een deel weg.
- Als de eigenschap is opgenomen voor het OPTION element, dan wordt de opgegeven padding ook aangehouden bij het bepalen van de afmetingen van de ingeklapte keuzelijst. De tekst wordt echter in de linker bovenhoek geplaatst.
Opera 3.5/3.6
- De eigenschap wordt niet ondersteund voor het TABLE element.
- Wanneer de eigenschap is opgenomen voor de elementen TD of TH dan wordt de padding links en rechts wel aangehouden bij de berekening van de breedte van de cel, maar de inhoud wordt tegen de linkerrand van de cel geplaatst. De padding aan de boven- en onderzijde wordt geheel genegeerd.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION, INPUT en TEXTAREA.
- De eigenschap wordt niet ondersteund voor het IMG element.
Opera 4.0
- De eigenschap wordt niet ondersteund voor het TABLE element.
- De eigenschap wordt (in afwijking van CSS 2.1) ondersteund voor het TR element, maar met een weinig logisch resultaat. Bij de berekening van de hoogte van de tabel wordt de opgegeven padding boven en onder meegeteld, maar de cellen in de rij worden slechts verhoogd met de padding onder. Er ontstaat daardoor extra ruimte boven de rij. Bij de berekening van de breedte van de tabel wordt geen rekening gehouden met de opgegeven padding links. Binnen de rij wordt echter wel de padding links aangehouden en daardoor komen de cellen geheel of gedeeltelijk buiten de tabel komen te staan. Een opgegeven padding rechts heeft geen effect.
- Wanneer de eigenschap is opgenomen voor het CAPTION element, dan krijgt de box van het bijschrift de breedte die nodig is voor de tekst en de padding links en rechts. De tabel zelf houdt de normale breedte en kan daardoor smaller zijn dan de box van het bijschrift.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION, INPUT en TEXTAREA.
Opera 5.0 t/m 6.0
- De eigenschap wordt niet ondersteund voor het TABLE element.
- De eigenschap wordt (in afwijking van CSS 2.1) ondersteund voor het TR element, maar met een weinig logisch resultaat. Bij de berekening van de hoogte van de tabel wordt de opgegeven padding boven en onder meegeteld, maar de cellen in de rij worden slechts verhoogd met de padding onder. Er ontstaat daardoor extra ruimte boven de rij. Bij de berekening van de breedte van de tabel wordt geen rekening gehouden met de opgegeven padding links. Binnen de rij wordt echter wel de padding links aangehouden en daardoor komen de cellen geheel of gedeeltelijk buiten de tabel komen te staan. Een opgegeven padding rechts heeft geen effect.
- De ondersteuning van de eigenschap voor het CAPTION element is niet op een logisch wijze geïmplementeerd. De breedte van de tabel zelf wordt met de som van de opgegeven padding links en rechts vergroot en de breedte van de box van het bijschrift is de breedte van de tabel, maar dan nog weer eens vergroot met de som van de opgegeven padding links en rechts.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION, INPUT en TEXTAREA.
Opera 7.0
- De eigenschap wordt niet ondersteund voor het TABLE element.
- De ondersteuning van de eigenschap voor het CAPTION element is niet op een logisch wijze geïmplementeerd. De padding links wordt weliswaar netjes aangehouden, maar omdat de box van het bijschrift de breedte van de tabel heeft, is de kans groot dat de tekst bij smalle tabellen over de rand van de box heenloopt.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION en TEXTAREA.
- Wanneer de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "text" of "password" heeft (dus als het gaat om een tekst- of een wachtwoordveld), dan wordt de breedte van het veld wel aangepast aan de extra ruimte die de padding vraagt, maar de tekst wordt altijd tegen de linkerrand van het veld geplaatst.
- Wanneer de eigenschap is opgenomen voor een INPUT element, waarvan het TYPE attribuut de waarde "submit" of "reset" heeft, dan wordt de breedte van de knop wel aangepast aan de extra ruimte die de padding vraagt, maar de tekst wordt altijd gecentreerd.
Opera 7.1
- De eigenschap wordt niet ondersteund voor het TABLE element.
- De ondersteuning van de eigenschap voor het CAPTION element is niet op een logisch wijze geïmplementeerd. De breedte van de box van het bijschrift is de som van de padding links en rechts behalve als de tabel breder is, want dan wordt de breedte van de tabel aangehouden. Voor het bijschrift wordt de padding links correct aangehouden, maar als het om een smalle tabel gaat, is de kans groot dat de tekst over de rand van de box heenloopt.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTION, INPUT en TEXTAREA.
Opera 7.2 en hoger
- Als de eigenschap met een waarde voor de padding aan de bovenzijde is opgenomen voor een element op blokniveau dat standaard een margin boven het element heeft (zoals P, BLOCKQUOTE, Hx, UL, OL, DL en FORM), dan wordt deze margin ook weergegeven als het element het eerste element in de body van het document is.
- De ondersteuning van de eigenschap voor het CAPTION element is niet op een logisch wijze geïmplementeerd. De breedte van de box van het bijschrift is de som van de padding links en rechts behalve als de tabel breder is, want dan wordt de breedte van de tabel aangehouden. Voor het bijschrift wordt de padding links correct aangehouden, maar als het om een smalle tabel gaat, is de kans groot dat de tekst over de rand van de box heenloopt.
- De eigenschap wordt niet ondersteund voor de elementen SELECT, OPTIONINPUT en TEXTAREA.
- De eigenschap wordt niet ondersteund voor het INPUT element, behalve als het TYPE attribuut de waarde "submit" of "reset" heeft en er tevens een rand is gedefinieerd. Wanneer het element geen rand heeft, dan houdt de knop het gewone formaat. Omdat voor de tekst wel de opgegeven padding wordt aangehouden (in ieder geval links), is de kans groot dat deze geheel of gedeeltelijk onzichtbaar wordt.


Legenda | Voorbeelden | Padding | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 januari 2005