CSS
Stoppning
Sök…
Syntax
- polstring: längd | initial | ärva | unset;
- padding-top: längd | initial | ärva | unset;
- padding-höger: längd | initial | ärva | unset;
- polstring-botten: längd | initial | ärva | unset;
- stoppning-vänster: längd | initial | ärva | unset;
Anmärkningar
1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN
Se även denna fråga "Varför stöder CSS inte negativ utfyllnad?" och hans svar.
Tänk också på Box-modellen när du använder stoppning. Beroende på rutans storlek, kan stoppning på ett element antingen lägga till den tidigare definierade höjden / bredden på ett element eller inte.
Relaterade egenskaper:
Polstring på inlineelement gäller endast till vänster och höger om elementet, och inte uppifrån och botten, på grund av de inbyggda visningsegenskaperna för inlineelement.
Polstring på en given sida
Polstringsegenskapen anger stoppningsutrymmet på alla sidor av ett element. Polstringsområdet är utrymmet mellan innehållet i elementet och dess kant. Negativa värden är inte tillåtna.
Du kan ange en sida individuellt:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Följande kod skulle lägga till en stoppning av 5px till toppen av div:
<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Polstring Shorthand
Polstringsegenskapen anger stoppningsutrymmet på alla sidor av ett element. Polstringsområdet är utrymmet mellan innehållet i elementet och dess kant. Negativa värden är inte tillåtna.
För att spara att lägga till stoppning på varje sida individuellt (med padding-top , padding-left osv.) Kan du skriva det som en kortfattning, enligt nedan:
Fyra värden :
<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Tre värden :
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>
Två värden :
<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
Ett värde :
<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>
