Najnowsze tutoriale tworzenie stron internetowych
 

CSS Wyściółka

❮ Poprzedni Następny rozdział ❯

Właściwości CSS padding

CSS padding właściwości są wykorzystywane do generowania przestrzeń wokół treści.

Właściwości dopełnienia ustawić rozmiar białej przestrzeni pomiędzy zawartości pierwiastków i granicy elementu.

Ten element ma dopełnienie 50px.

CSS padding

Właściwości CSS dopełnienia definiują spacje między zawartością elementu i elementu granicy.

Wypełnienie czyści powierzchnię wokół treści (wewnątrz granicy) elementu.

UwagaUwaga: Wypełnienie ma wpływ kolor tła elementu!

Z CSS, masz pełną kontrolę nad wyściółki. Są to właściwości CSS do ustawiania dopełnienie dla każdej strony elementu (górny, prawy, dolny i lewy).

Dopełnienie - poszczególnych boków

CSS ma właściwości określenie wyściółkę po każdej stronie elementu:

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

Wszystkie właściwości wypełniające może mieć następujące wartości:

  • długość - określa dopełnienie w px, pt, cm , etc.
  • % - Określa wyściółkę w% szerokości elementu zawierającego
  • dziedziczy - określa, że ​​wyściółka należy dziedziczone z elementu nadrzędnego

Poniższy przykład ustawia inny dopełnienie dla wszystkich czterech bokach <p> element:

Przykład

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Spróbuj sam "

Dopełnienie - Skrót nieruchomości

W celu skrócenia tego kodu nie jest możliwe, aby określić wszystkie właściwości wypełniające w jednym obiekcie.

padding nieruchomość jest skróconą własnością dla następujących poszczególnych właściwości padding:

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

Przykład

p {
    padding: 50px 30px 50px 80px;
}
Spróbuj sam "

Więc, oto jak to działa:

Jeśli padding Obiekt ma cztery wartości:

  • padding: 25px 50px 75 pikseli 100px;
    • top padding 25px
    • Prawo padding 50px
    • Dno wyściółka jest 75 pikseli
    • lewa wyściółka jest 100px

Jeśli padding Nieruchomość posiada trzy wartości:

  • padding: 25px 50px 75 pikseli;
    • top padding 25px
    • prawej i lewej uzupełnień są 50px
    • Dno wyściółka jest 75 pikseli

Jeśli padding Nieruchomość posiada dwie wartości:

  • padding: 25px 50px;
    • Górne i dolne Podkładki są 25px
    • prawej i lewej uzupełnień są 50px

Jeśli padding Nieruchomość posiada jedną wartość:

  • padding: 25px;
    • wszystkie cztery podkładki są 25px
Przykłady

Więcej przykładów

Wszystkie właściwości wypełniające w jednej deklaracji
Przykład ten demonstruje właściwość skrótem dla ustawiania wszystkich właściwości wypełniających w jednym zgłoszenia, może mieć od jednego do czterech wartości.

Ustaw lewy dopełnienie
Ten przykład pokazuje jak ustawić lewy dopełnienie o <p> elementu.

Ustaw odpowiednią wyściółkę
Ten przykład pokazuje jak ustawić odpowiednią wyściółkę o <p> elementu.

Ustaw górną wyściółkę
Ten przykład pokazuje jak ustawić górną wyściółkę o <p> elementu.

Ustaw dolny wyściółkę
Ten przykład pokazuje jak ustawić dolną wyściółkę o <p> elementu.

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »

Wszystkie właściwości CSS padding

Nieruchomość Opis
padding Skrót nieruchomości na ustawienie wszystkich właściwości wypełniające w jednej deklaracji
padding-bottom Ustawia dolny wyściółkę elementu
padding-left Ustawia lewy dopełnienie elementu
padding-right Ustawia odpowiednią wyściółkę elementu
padding-top Ustawia górną wyściółkę elementu

❮ Poprzedni Następny rozdział ❯