HTML5 - Polstring

Det polstring i HTML giver det os mulighed for at generere et mellemrum mellem indholdet og kanterne på boksen, der indeholder dem, på denne måde kan vi give elementet luft og opnå interessante grafiske effekter.

• Polstringstop: Initialiserer polstring til den øvre kant, dens målinger udtrykkes i længde eller i procent.
• Polstring-højre: Initialiserer polstring til højre kant, dens målinger udtrykkes i længde eller i procent.
• Polstring-bund: Initialiserer polstring til underkant, dens målinger udtrykkes i længde eller i procent.
• Polstring-venstre: Initialiserer polstring til venstre kant, dens målinger udtrykkes i længde eller i procent.
• Polstring: Denne genvej hjælper os med at initialisere polstringen med alle dens kanter i en enkelt linje.

Noget vigtigt, som vi skal begrænse, når vi foretager initialiseringen af ​​a polstring Brug af procentmålinger er, at denne procentdel kun vil blive taget baseret på elementets bredde, aldrig på højden.
Lad os nu se med en enkel kode, hvordan du anvender a polstring i vores HTML5 -dokument.

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Som vi kan se fra denne kode, kan vi fremhæve ganske interessante ting, hvis vi kigger godt efter, har vi allerede anvendt andre stilarter på det element, som vi holder på, og det vil sige, at vi kan blande os med andre elementer for at opnå vores resultat, vi kan se også, at vi bruger måleenheden em i stedet for pxSelvom de to er kompatible, er det et spørgsmål om, at vi kan se deres alsidighed; Lad os endelig se, hvordan dette ser ud i vores browser:

Lad os nu se, hvordan du anvender genvejen til at initialisere vores polstring i en enkelt linje, for dette er rækkefølgen af ​​polstringsmålene som følger: Op, Højre, Ned, Venstre; Ud over dette, når vi udelader værdier, justeres den anden værdi til den ikke-udeladte værdi, for eksempel hvis vi udelader venstre vil det tage værdien af ​​højre, hvis vi udelader den nederste, vil den tage værdien af den øverste, hvis vi kun placerer en værdi, vil de fire sider tage den samme værdi.
Vi kommer til at demonstrere al denne teori med en praksiskodeks, lad os se, hvordan vi implementerer polstring i en enkelt linje på en meget enkel måde.

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Som vi kan se, ændrer polstringserklæringen ikke meget, og vi gemmer et par linjer, lad os se på, hvordan det ville se ud i browseren:

I dette element opretter vi det med en ret uregelmæssig kant, hvis vi ikke havde anvendt polstring, ville grænsen have opsnappet teksten, foretag ændringen og tjek i dine browsere for at se forskellen.
Med dette afslutter vi vores HTML5 -padding -tutorial, vi kan nu oprette mellemrum inden for de elementer, der indeholder vores indhold i HTML -dokumentet, og det, vi har tilbage, er at blive ved med at øve, indtil vi har mestret det, vi har lært i denne tutorial.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt