Dacă vrem să adăugăm padding în documentul HTML folosind CSS intern, atunci trebuie să urmam pașii care sunt dați mai jos. Folosind acești pași simpli, putem adăuga cu ușurință umplutura.
Pasul 1: În primul rând, trebuie să introducem codul HTML în orice editor de text sau să deschidem fișierul HTML existent în editorul de text în care dorim să adăugăm padding-ul.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Pasul 2: Acum, trebuie să plasăm cursorul în eticheta head imediat după eticheta de titlu a documentului HTML și apoi să definim eticheta așa cum se arată în blocul următor.
Add the Padding in Html
Pasul 3: Acum, trebuie să definim proprietatea de umplutură în acel selector de id care este specificat chiar înainte de textul pe care vrem să adăugăm padding.
Iată cele cinci proprietăți diferite din care putem aplica umplutura pe fiecare parte:
i. Umplutură-stânga:
butonul tkinter
Dacă vrem să aplicăm doar căptușeală din stânga unui element, atunci trebuie să folosim numai padding-stânga proprietate în selectorul de id. Și, atunci trebuie să setăm o singură valoare proprietății așa cum se arată în exemplul următor:
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. Testează-l acum Ieșirea codului de mai sus care utilizează proprietatea padding-left este afișată în următoarea captură de ecran:
ii. Umplutură-dreapta:
Dacă vrem să aplicăm doar umplutura corectă unui element, atunci trebuie să folosim numai umplutura-dreapta proprietate în selectorul de id. Și, atunci trebuie să setăm o singură valoare proprietății așa cum se arată în exemplul următor:
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. Testează-l acum Ieșirea codului de mai sus care utilizează proprietatea padding-right este afișată în următoarea captură de ecran:
iii. Partea superioară a căptușelii:
Dacă vrem să aplicăm doar suprafața unui element, atunci trebuie să folosim numai padding-top proprietate în selectorul de id. Și, atunci trebuie să setăm o singură valoare proprietății așa cum se arată în exemplul următor:
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. Testează-l acum Ieșirea codului de mai sus care utilizează proprietatea padding-top este afișată în următoarea captură de ecran:
iv. Umplutură de fund:
Dacă vrem să aplicăm doar căptușeală inferioară unui element, atunci trebuie să folosim numai umplutură de fund proprietate în selectorul de id. Și, atunci trebuie să setăm o singură valoare proprietății așa cum se arată în exemplul următor:
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. Testează-l acum Ieșirea codului de mai sus care utilizează proprietatea padding-bottom este afișată în următoarea captură de ecran:
ymail
v. Umplutură:
Dacă vrem să aplicăm diferite padding pe toate cele patru laturi (sus, jos, stânga, dreapta), atunci trebuie să specificăm cele patru valori în proprietatea padding.
padding: 10px 50px 75px 200px;
Dacă specificăm cele două valori, atunci editorul Html aplică prima padding în partea de sus și de jos și a doua padding la stânga și la dreapta.
padding: 100px 50px;
Dacă specificăm doar valoare în atributul padding, atunci editorul HTML aplică aceeași padding pe toate cele patru laturi.
încercați catch block în java
padding: 100px;
Exemple de proprietate de umplutură:
Exemplul 1: Următorul exemplu utilizează o valoare din proprietatea padding pentru a seta aceeași umplutură pe toate cele patru laturi.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. Testează-l acum Ieșirea exemplului 1 este afișată în următoarea captură de ecran:
Exemplul 2: Următorul exemplu utilizează două valori în căptușeală proprietate de a seta aceeași umplutură pe părțile opuse.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. Testează-l acum Ieșirea exemplului 2 este afișată în următoarea captură de ecran:
Exemplul 3: Următorul exemplu utilizează patru valori în proprietatea padding pentru a seta diferite padding pe toate cele patru laturi.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. Testează-l acum Ieșirea exemplului 3 este afișată în următoarea captură de ecran:
