CSS Opvulling
Opvulling word gebruik om ruimte rondom 'n element se inhoud te skep, binne enige gedefinieerde grense.
CSS Opvulling
Die CSS padding-eienskappe word gebruik om spasie rondom 'n element se inhoud te genereer, binne enige gedefinieerde grense.
Met CSS het jy volle beheer oor die vulling. Daar is eienskappe om die vulling vir elke kant van 'n element te stel (bo, regs, onder en links).
Opvulling - Individuele kante
CSS het eienskappe om die opvulling vir elke kant van 'n element te spesifiseer:
padding-toppadding-rightpadding-bottompadding-left
Al die opvulling-eienskappe kan die volgende waardes hê:
- lengte - spesifiseer 'n opvulling in px, pt, cm, ens.
- % - spesifiseer 'n opvulling in % van die breedte van die element wat bevat
- erf - spesifiseer dat die opvulling van die ouerelement geërf moet word
Let wel: Negatiewe waardes word nie toegelaat nie.
Voorbeeld
Stel verskillende vulling vir al vier kante van 'n <div>-element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Opvulling - Snelskrif Eiendom
Om die kode te verkort, is dit moontlik om al die opvullingseienskappe in een eiendom te spesifiseer.
Die paddingeiendom is 'n snelskrif-eiendom vir die volgende individuele opvul-eiendomme:
padding-toppadding-rightpadding-bottompadding-left
So, hier is hoe dit werk:
As die paddingeiendom vier waardes het:
- vulling: 25px 50px 75px 100px;
- boonste vulling is 25px
- regtervulling is 50px
- onderste vulling is 75px
- linker vulling is 100px
Voorbeeld
Gebruik die opvulling snelskrif-eienskap met vier waardes:
div {
padding: 25px 50px 75px 100px;
}
As die paddingeiendom drie waardes het:
- vulling: 25px 50px 75px;
- boonste vulling is 25px
- regter- en linkervulling is 50px
- onderste vulling is 75px
Voorbeeld
Gebruik die opvulling snelskrif-eienskap met drie waardes:
div {
padding: 25px 50px 75px;
}
As die paddingeiendom twee waardes het:
- vulling: 25px 50px;
- boonste en onderste vullings is 25px
- regter- en linkervulling is 50px
Voorbeeld
Gebruik die opvulling snelskrif-eienskap met twee waardes:
div {
padding: 25px 50px;
}
As die paddingeiendom een waarde het:
- vulling: 25px;
- al vier vulsels is 25px
Voorbeeld
Gebruik die opvulling snelskrif-eienskap met een waarde:
div {
padding: 25px;
}
Opvulling en elementbreedte
Die CSS width-eienskap spesifiseer die breedte van die element se inhoudsarea. Die inhoudsarea is die gedeelte binne die opvulling, rand en kantlyn van 'n element ( die boksmodel ).
Dus, as 'n element 'n gespesifiseerde breedte het, sal die opvulling wat by daardie element gevoeg word by die totale breedte van die element gevoeg word. Dit is dikwels 'n ongewenste resultaat.
Voorbeeld
Hier word die <div>-element 'n breedte van 300px gegee. Die werklike breedte van die <div>-element sal egter 350px wees (300px + 25px van linkervulling + 25px van regtervulling):
div {
width: 300px;
padding: 25px;
}
Om die breedte op 300px te hou, ongeag die hoeveelheid vulling, kan jy die
box-sizingeiendom gebruik. Dit veroorsaak dat die element sy werklike breedte behou; as jy die opvulling vergroot, sal die beskikbare inhoudspasie verminder.
Voorbeeld
Gebruik die boksgrootte-eienskap om die breedte op 300px te hou, ongeag die hoeveelheid vulling:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Meer voorbeelde
Hierdie voorbeeld demonstreer hoe om die linkervulsel van 'n <p>-element te stel.
Hierdie voorbeeld demonstreer hoe om die regte vulling van 'n <p> element te stel.
Hierdie voorbeeld demonstreer hoe om die boonste vulling van 'n <p> element te stel.
Hierdie voorbeeld demonstreer hoe om die onderste vulling van 'n <p> element te stel.
Alle CSS Padding-eienskappe
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |