CSS => vulling

Syntaxis

padding: length | initial | inherit | unset;
padding-top: length | initial | inherit | unset;
padding-right: length | initial | inherit | unset;
padding-bottom: length | initial | inherit | unset;
padding-left: length | initial | inherit | unset;

Opmerkingen

Met de opvullingseigenschap wordt de opvulruimte aan alle zijden van een element ingesteld. Het opvulgebied is de ruimte tussen de inhoud van het element en zijn rand. Negatieve waarden zijn niet toegestaan .

1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN

Zie ook deze vraag : "Waarom ondersteunt CSS geen negatieve opvulling?" en zijn antwoorden.

Overweeg ook The Box Model bij het gebruik van padding. Afhankelijk van de waarde van de doosgrootte, kan opvulling op een element toevoegen aan de eerder gedefinieerde hoogte / breedte van een element of niet.

Gerelateerde eigenschappen:

marge

Opvulling van inline-elementen is alleen van toepassing op de linker- en rechterkant van het element, en niet op de boven- en onderkant, vanwege de inherente weergave-eigenschappen van inline-elementen.

Vulling aan een gegeven zijde

Met de opvullingseigenschap wordt de opvulruimte aan alle zijden van een element ingesteld. Het opvulgebied is de ruimte tussen de inhoud van het element en zijn rand. Negatieve waarden zijn niet toegestaan.

U kunt een zijde afzonderlijk opgeven:

padding-top
padding-right
padding-bottom
padding-left

De volgende code voegt een opvulling van 5 5px aan de bovenkant van de div:

<style>
.myClass {
    padding-top: 5px;
}
</style>

<div class="myClass"></div>

Padding steno

Als u het toevoegen van opvulling aan elke zijde afzonderlijk wilt opslaan (met behulp van padding-top , padding-left enz.), Kunt u het als steno schrijven, zoals hieronder:

Vier waarden :

<style>
    .myDiv {
        padding: 25px 50px 75px 100px; /* top right bottom left; */
    }
</style>
<div class="myDiv"></div>

Drie waarden :

<style>
    .myDiv {
        padding: 25px 50px 75px; /* top left/right bottom */
    }
</style>
<div class="myDiv"></div>

Twee waarden :

<style>
    .myDiv {
        padding: 25px 50px; /* top/bottom left/right */
    }
</style>
<div class="myDiv"></div>

Een waarde :

<style>
    .myDiv {
        padding: 25px; /* top/right/bottom/left */
    }
</style>
<div class="myDiv"></div>

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
vulling

Zoeken…

Syntaxis

Opmerkingen

Vulling aan een gegeven zijde

Padding steno