Dopełnienie CSS
Padding służy do tworzenia przestrzeni wokół zawartości elementu, wewnątrz dowolnych zdefiniowanych granic.
Dopełnienie CSS
Właściwości CSS paddingsą używane do generowania przestrzeni wokół zawartości elementu, wewnątrz dowolnych zdefiniowanych granic.
Dzięki CSS masz pełną kontrolę nad dopełnieniem. Istnieją właściwości umożliwiające ustawienie dopełnienia dla każdej strony elementu (góra, prawo, dół i lewo).
Wyściółka — poszczególne boki
CSS ma właściwości określające wypełnienie dla każdej strony elementu:
padding-toppadding-rightpadding-bottompadding-left
Wszystkie właściwości dopełnienia mogą mieć następujące wartości:
- długość - określa dopełnienie w pikselach, pt, cm itp.
- % - określa wypełnienie w % szerokości elementu zawierającego
- Dziedzicz - określa, że dopełnienie powinno być dziedziczone z elementu rodzica
Uwaga: wartości ujemne nie są dozwolone.
Przykład
Ustaw różne dopełnienie dla wszystkich czterech stron elementu <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Skrót własności
Aby skrócić kod, możliwe jest określenie wszystkich właściwości dopełnienia w jednej właściwości.
Właściwość paddingjest skróconą własnością dla następujących indywidualnych właściwości dopełnienia:
padding-toppadding-rightpadding-bottompadding-left
Oto jak to działa:
Jeśli paddingwłaściwość ma cztery wartości:
- padding: 25px 50px 75px 100px;
- górna wyściółka to 25px
- prawe wypełnienie to 50px
- dolna wyściółka to 75px
- lewy dopełnienie to 100px
Przykład
Użyj skróconej właściwości dopełniania z czterema wartościami:
div {
padding: 25px 50px 75px 100px;
}
Jeśli paddingwłaściwość ma trzy wartości:
- padding: 25px 50px 75px;
- górna wyściółka to 25px
- dopełnienie prawe i lewe to 50px
- dolna wyściółka to 75px
Przykład
Użyj skróconej właściwości dopełniania z trzema wartościami:
div {
padding: 25px 50px 75px;
}
Jeśli paddingwłaściwość ma dwie wartości:
- dopełnienie: 25px 50px;
- górna i dolna wyściółka to 25px
- dopełnienie prawe i lewe to 50px
Przykład
Użyj skróconej właściwości dopełniania z dwiema wartościami:
div {
padding: 25px 50px;
}
Jeśli paddingwłaściwość ma jedną wartość:
- wypełnienie: 25px;
- wszystkie cztery wypełnienia mają 25px
Przykład
Użyj skróconej właściwości dopełniania z jedną wartością:
div {
padding: 25px;
}
Dopełnienie i szerokość elementu
Właściwość CSS widthokreśla szerokość obszaru zawartości elementu. Obszar zawartości to część wewnątrz dopełnienia, obramowania i marginesu elementu ( model pudełkowy ).
Tak więc, jeśli element ma określoną szerokość, dopełnienie dodane do tego elementu zostanie dodane do całkowitej szerokości elementu. Jest to często niepożądany wynik.
Przykład
Tutaj element <div> ma szerokość 300px. Jednak rzeczywista szerokość elementu <div> wyniesie 350px (300px + 25px lewego dopełnienia + 25px prawego dopełnienia):
div {
width: 300px;
padding: 25px;
}
Aby zachować szerokość 300px, bez względu na ilość wypełnienia, możesz użyć
box-sizingwłaściwości. Powoduje to, że element zachowuje swoją rzeczywistą szerokość; jeśli zwiększysz dopełnienie, zmniejszy się dostępna przestrzeń na zawartość.
Przykład
Użyj właściwości box-sizing, aby zachować szerokość 300 pikseli, bez względu na ilość wypełnienia:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Więcej przykładów
Ten przykład pokazuje, jak ustawić lewe dopełnienie elementu <p>.
Ten przykład pokazuje, jak ustawić właściwe dopełnienie elementu <p>.
Ten przykład pokazuje, jak ustawić górne dopełnienie elementu <p>.
Ten przykład pokazuje, jak ustawić dolne dopełnienie elementu <p>.
Wszystkie właściwości dopełniania CSS
| 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 |