HTML5 - vaddering

De stoppning i HTML tillåter det oss att generera ett utrymme mellan innehållet och kanterna på rutan som innehåller dem, på så sätt kan vi ge elementet luft och uppnå intressanta grafiska effekter.

• Vadderingstopp: Initierar vadderingen för överkanten, dess mått uttrycks i längd eller i procent.
• Vaddering-höger: Initierar vadderingen för högerkant, dess mått uttrycks i längd eller i procent.
• Vadderingsbotten: Initierar vadderingen för den nedre kanten, dess mått uttrycks i längd eller i procent.
• Vaddering-vänster: Initierar vadderingen för vänster kant, dess mått uttrycks i längd eller i procent.
• Stoppning: Denna genväg hjälper oss att göra initialiseringen av stoppningen med alla dess kanter i en enda rad.

Något viktigt som vi måste begränsa när vi gör initialiseringen av a stoppning Att använda procentuella mätningar är att denna procentsats endast kommer att tas baserat på elementets bredd, aldrig på höjden.
Låt oss nu se med en enkel kod hur man applicerar en stoppning i vårt HTML5 -dokument.

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Som vi kan se från den här koden kan vi lyfta fram ganska intressanta saker, om vi tittar noga har vi redan applicerat andra stilar på elementet som vi stoppar på och det vill säga att vi kan blanda med andra element för att få vårt resultat, vi kan se också att vi använder måttenheten em istället för pxÄven om de två är kompatibla är det en fråga att vi kan se deras mångsidighet; slutligen låt oss se hur det ser ut i vår webbläsare:

Låt oss nu se hur du använder genvägen för att initiera vår stoppning i en enda rad, för detta är ordningen för vadderingsmätningarna följande: Upp, Höger, Ned, Vänster; Utöver detta när vi utelämnar värden, justeras det andra värdet till det icke-utelämnade värdet, till exempel om vi utelämnar vänster kommer det att ta värdet på höger, om vi utelämnar det lägre, tar det värdet av den övre, om vi bara placerar ett värde, kommer de fyra sidorna att ta samma värde.
Vi kommer att demonstrera all denna teori med en övningskod, låt oss se hur vi implementerar stoppning i en enda rad på ett mycket enkelt sätt.

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Som vi kan se ändras inte vadderingsdeklarationen mycket och vi sparar några rader, låt oss ta en titt på hur det skulle se ut i webbläsaren:

I det här elementet skapar vi det med en ganska oregelbunden kant, om vi inte hade applicerat vadderingen skulle ramen ha fångat upp texten, gör ändringen och kolla in din webbläsare för att se skillnaden.
Med detta avslutar vi vår HTML5 -utfyllnadshandledning, vi kan nu skapa mellanslag inom elementen som innehåller vårt innehåll i HTML -dokumentet, och det vi har kvar är att fortsätta träna tills vi har bemästrat vad vi har lärt oss i den här självstudien.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng