Utfyllnad
Utfyllnad
Utfyllnad är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 1 av 1. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för HTML for Kids, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML for Kids innehåller totalt 1 lektioner.
Introduktion
Hej!
Välkommen till lektionen om CSS Padding.
Det används för att skapa utrymme innanför gränserna för vårt HTML-element.
Precis som med margin kan vi lägga till padding på elementets alla fyra sidor.
Procenttyp
I vårt föregående exempel tilldelade vi ett padding-värde med ett statiskt värde av typen px. Precis som med margin kan vi ange ett värde av procenttyp.
<!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>
För att förkorta koden
Precis som med margin går det att definiera padding på en enda rad med förkortad syntax.
Värdena för padding på överkanten, höger sida, underkanten och vänster sida kan läggas till med mellanslag emellan, i den ordningen.
Titta på vår exempelkod så ser ni att den liknar syntaxen för margin väldigt mycket.
<!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>Grattis
Grattis 🎉
I det här avsnittet har vi lärt oss om CSS Margins.
I nästa avsnitt ska vi lära oss om Color and Background.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 16
- Lektioner
- 35
Vanliga frågor
Är lektionen ”Utfyllnad” gratis?
Ja – hela texten till ”Utfyllnad” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i HTML for Kids, kan Ni uppgradera till CoddyKit PRO. Kursen i HTML for Kids innehåller totalt 1 lektioner.
Vad lär jag mig i ”Utfyllnad”?
Utfyllnad Ni övar på HTML for Kids med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML for Kids?
Du behöver inga förkunskaper. Utbildningen i HTML for Kids på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 1.
Hur lång tid tar lektionen ”Utfyllnad”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML for Kids-lektionen?
Ja. Varje HTML for Kids-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.