HTML paddingstil - CSS

HTML paddingstil - CSS

Cascading Style Sheet (CSS) gir hundrevis av stylingegenskaper for HTML -elementene. Sammen med dekorasjonsstiler gir den også egenskaper for å justere posisjonene og plasseringen av elementene på websiden. Disse egenskapene inkluderer "flyte”,“polstring”,“margin”,“posisjon", og mange flere.

Dette innlegget vil dekke:

  • Hva er "polstring" -egenskapen i CSS?
  • Hvordan spesifisere "polstring" -egenskapen?

Hva er "polstring" -egenskapen i CSS?

polstring”Eiendom beskriver avstanden mellom et elements innhold og grensen. Mer spesifikt tilfører denne egenskapen plass i elementet, mens "margin”Eiendom genererer plass rundt elementet. Verdiene til padding -egenskapen kan måles i “PX”,“Em”,“REM", eller mer. Imidlertid "REM”Er den beste enheten å bruke med margin- og polstringsegenskaper.

Forutsetning: Opprett en HTML -fil

For å bruke padding -egenskapen på HTML -elementer, må brukerne opprette HTML -filen. For dette formålet, bruk følgende trinn:

  • Legg til en "”Element og tilordne det en klasse”hovedinnhold”.
  • Inkluder da “”Tag for å plassere et bilde og“

    ”Tag for å inkludere litt tekst:



Utdanningslyset gjør oss lyse.


La oss gå videre til CSS -delen for å bruke stilen på beholderen.

Stil “div” element

Først får du tilgang til “" elementet som har klasse ”.hovedinnhold”Og bruk følgende egenskaper:

.hovedinnhold
Bredde: 400px;
Margin: Auto;
Grense: 5px Groove RGB (151, 151, 151);

Beskrivelsen av de ovennevnte egenskapene er som følger:

  • bredde”Bestemmer elementets bredde.
  • margin”Definerer plassen rundt elementet.
  • grense”Bruker grensen rundt elementet ved å spesifisere verdiene for grensebredde, stil og farge.

Utgangen fra den ovennevnte koden er representert nedenfor:

Hvordan spesifisere "polstring" -egenskapen?

I CSS “polstring”Eiendom har et område på en til fire verdier. For bedre forståelse, følg de listede eksemplene:

  • Eksempel 1: CSS “polstring” -egenskap med en verdi
  • Eksempel 2: CSS “polstring” -egenskap med to verdier
  • Eksempel 3: CSS “polstring” -egenskap med tre verdier
  • Eksempel 4: CSS “polstring” -egenskap med fire verdier

Eksempel 1: CSS “polstring” -egenskap med en verdi

I CSS, når "polstring”Eiendom tildeles en verdi, den legger til“1REM”Plass på hver side av elementets innhold:

polstring: 1REM;

Produksjon

Eksempel 2: CSS “polstring” -egenskap med to verdier

polstring”Eiendom kan justeres med to verdier, hvor:

  • første verdi”Representerer polstring (plass) på topp- og bunnsiden.
  • andre verdi”Representerer plassen på venstre og høyre side av elementets innhold:
Polstring: 1REM 2REM;

Produksjon

Eksempel 3: CSS “polstring” -egenskap med tre verdier

CSS “polstring”Eiendom kan justeres med de tre verdiene. De fungerer som følger:

  • Den første verdien indikerer polstring øverst.
  • Den andre verdien betyr polstring på venstre og høyre side.
  • Den tredje verdien definerer polstring nederst i elementets innhold:
Polstring: 1REM 2REM 3REM;

Produksjon

Eksempel 4: CSS “polstring” -egenskap med fire verdier

polstring”Eiendom med fire verdier justerer det spesifiserte rommet mellom innholdet og grensen fra alle sider som beskrevet nedenfor:

  • Første verdi”Legger til polstring øverst.
  • Andre verdi”Legger til polstring på høyre side.
  • Tredje verdi”Legger til polstring i bunnen.
  • Fjerde verdi”Legger til polstring på venstre side:
Polstring: 2REM 3REM 1REM 2REM;

Produksjon

Vi har utdypet HTML -polstringsstiler med forskjellige verdier ved bruk av CSS.

Konklusjon

CSS “polstring”Eiendom øker avstanden rundt elementets innhold. Den har et verdibegrep fra en til fire. “En verdi”Begynner den samme polstringen på hver side av elementets innhold. “To verdier”Definer plassen i toppbunnen og høyre venstre side. “Tre verdier”Sett polstring øverst, venstre høyre og bunnsiden av elementets innhold. “Fire verdier”Spesifiser den unike polstringen på hver side. Dette innlegget har demonstrert HTML -polstringsstilen i CSS.