CSS
Wyściółka
Szukaj…
Składnia
- wypełnienie: długość | początkowy | dziedziczenie | rozbrojony;
- padding-top: length | initial | inherit | unset;
- padding-right: length | initial | inherit | unset;
- padding-bottom: length | initial | inherit | unset;
- padding-left: length | initial | inherit | unset;
Uwagi
1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN
Zobacz także pytanie : „Dlaczego CSS nie obsługuje ujemnego dopełnienia?” i jego odpowiedzi.
Podczas stosowania obicia należy również wziąć pod uwagę model pudełka . W zależności od wartości rozmiaru pudełka wypełnienie elementu może albo dodać do wcześniej zdefiniowanej wysokości / szerokości elementu, albo nie.
Powiązane właściwości:
Wypełnienie elementów wstawianych będzie stosowane tylko z lewej i prawej strony elementu, a nie z góry i dołu, ze względu na nieodłączne właściwości wyświetlania elementów wbudowanych.
Wypełnienie po danej stronie
Właściwość padding ustawia przestrzeń padding ze wszystkich stron elementu. Obszar wypełnienia to przestrzeń między zawartością elementu a jego granicą. Wartości ujemne są niedozwolone.
Możesz określić stronę indywidualnie:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Poniższy kod 5px dopełnienie 5px na górze div:
<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Padding Shorthand
Właściwość padding ustawia przestrzeń padding ze wszystkich stron elementu. Obszar wypełnienia to przestrzeń między zawartością elementu a jego granicą. Wartości ujemne są niedozwolone.
Aby zapisać dodawanie dopełnienia z każdej strony osobno (używając padding-top , padding-left itp.), Możesz napisać to jako skrót, jak poniżej:
Cztery wartości :
<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Trzy wartości :
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>
Dwie wartości :
<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
Jedna wartość :
<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>
