Padding
Padding
Padding er en gratis leksjon i HTML for Kids på CoddyKit. Dette er leksjon 1 av 1. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML for Kids, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Introduksjon
Hei,
Velkommen til leksjonen om CSS-padding.
Padding brukes til å opprette et mellomrom innenfor grensene til HTML-elementet vårt.
Akkurat som med margin kan vi legge til padding på elementets fire sider.
Prosenttype
I det forrige eksempelet angav vi en padding-verdi med en statisk verdi i px. Akkurat som med margin kan vi angi en prosentverdi.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
Slik forkorter du koden
Akkurat som med margin kan padding defineres på én linje ved hjelp av kortformsyntaks.
Verdiene for padding på toppen, høyre, bunnen og venstre kan legges til med mellomrom mellom dem, i denne rekkefølgen.
Se på eksempelkoden vår, så ser du at den ligner svært mye på margin.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>Gratulerer
Gratulerer 🎉
I denne delen lærte vi om CSS-margin.
I neste del skal vi lære om farger og bakgrunner.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 16
- Leksjoner
- 35
Ofte stilte spørsmål
Er leksjonen «Padding» gratis?
Ja – hele teksten i «Padding» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av HTML for Kids-kurset, kan du oppgradere til CoddyKit PRO. Kurset i HTML for Kids inneholder totalt 1 leksjoner.
Hva lærer jeg i «Padding»?
Padding Du øver på HTML for Kids med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML for Kids?
Ingen tidligere erfaring er nødvendig. HTML for Kids på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 1.
Hvor lang tid tar leksjonen «Padding»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML for Kids-leksjonen?
Ja. Alle HTML for Kids-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.