Ultimele tutoriale de dezvoltare web
 

CSS umplutură

❮ precedent Capitolul următor ❯

Proprietăți CSS Garniture

CSS - padding proprietăți sunt folosite pentru a genera spațiu în jurul conținutului.

Proprietățile padding setați dimensiunea spațiului alb dintre conținutul elementului și frontiera elementului.

Acest element are o căptușeală de 50px.

CSS Umplere

Proprietățile CSS padding defini spațiul alb între conținutul elementului și granița elementului.

Padding șterge o zonă în jurul conținutului (inside the border) a unui element.

Note: Căptușeala este afectată de culoarea de fundal a elementului!

Cu CSS, aveți control deplin asupra padding. Există proprietăți CSS pentru setarea capitonarea pentru fiecare parte a unui element (top, right, bottom, and left) .

Padding - Fețe individuale

CSS are proprietăți pentru specificarea capitonarea pentru fiecare parte a unui element:

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

Toate proprietățile de umplutură pot avea următoarele valori:

  • Lungimea - specifică o umplutură în px, pt, cm , etc.
  • % - specifică o umplutură în% din lățimea elementului ce conține
  • moștenesc - specifică faptul că padding trebuie să fie moștenită de la elementul părinte

Exemplul următor seturi de umplutură diferite pentru toate cele patru laturi ale unui <p> Element:

Exemplu

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Încearcă - l singur »

Padding - Proprietate stenografie

Pentru a scurta codul, este posibil să se specifice toate proprietățile de umplutură într-o singură proprietate.

padding Proprietatea este o proprietate prescurtare pentru următoarele proprietăți individuale de umplutură:

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

Exemplu

p {
    padding: 50px 30px 50px 80px;
}
Încearcă - l singur »

Deci, iată cum funcționează:

Dacă padding Proprietatea are patru valori:

  • padding: 25px 50px 75px 100px;
    • top padding este 25px
    • padding dreapta este 50px
    • padding de jos este 75px
    • padding stânga este 100px

Dacă padding Proprietatea are trei valori:

  • padding: 25px 50px 75px;
    • top padding este 25px
    • căptușeli dreapta și stânga sunt 50px
    • padding de jos este 75px

Dacă padding Proprietatea are două valori:

  • padding: 25px 50px;
    • căptușeli sus și de jos sunt 25px
    • căptușeli dreapta și stânga sunt 50px

Dacă padding Proprietatea are o singură valoare:

  • padding: 25px;
    • toate cele patru căptușeli sunt 25px
Exemple

Mai multe exemple

Toate proprietățile de umplutură într - o singură declarație
Acest exemplu demonstrează o proprietate prescurtare pentru setarea tuturor proprietăților de umplutură într-o singură declarație, poate avea de la unu la patru valori.

Setați padding din stânga
Acest exemplu demonstrează modul în care să setați padding stângă a unui <p> Element.

Setați padding dreapta
Acest exemplu demonstrează modul de a seta padding dreptul unui <p> Element.

Setați umplutură superioară
Acest exemplu demonstrează modul de setare a capitonării de sus a unui <p> Element.

Setați padding jos
Acest exemplu demonstrează modul de setare a capitonării jos a unui <p> Element.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 »

Toate proprietățile CSS Garniture

Proprietate Descriere
padding O proprietate prescurtare pentru stabilirea tuturor proprietăților de umplutură într-o singură declarație
padding-bottom Setează capitonarea partea de jos a unui element
padding-left Setează capitonarea stângă a unui element
padding-right Setează capitonarea drept al unui element
padding-top Setează căptușeala de sus a unui element

❮ precedent Capitolul următor ❯