Förståelse av boxmodellen på ett praktiskt sätt
Svep för att visa menyn
HTML-element renderas som rektangulära rutor på en webbsida. Varje element har sitt innehållsområde, utfyllnad (padding), ram (border) och marginal (margin).
De fyra delarna av boxmodellen
Innehåll
Innehållsområdet innehåller text, bilder eller andra element. Detta är den synliga inre delen av elementet.
Utfyllnad (Padding)
Utfyllnad är utrymmet mellan innehållet och ramen. Skapar internt avstånd.
.box {
padding: 20px;
}
Utfyllnad ökar elementets synliga storlek.
Ram (Border)
Ramen omger utfyllnaden och innehållet.
.box {
border: 4px solid darkblue;
}
Som standard är ramens bredd 0, och ramens färg matchar textfärgen om inget annat anges.
Marginal (Margin)
Marginal är utrymmet utanför ramen. Skapar avstånd mellan element.
.box {
margin: 40px;
}
Marginal påverkar inte elementets bakgrundsfärg.
index.html
styles.css
I detta exempel:
- Bakgrunden fyller innehålls- och utfyllnadsområdet;
- Ram omger dessa;
- Marginal skapar utrymme utanför rutan.
Som standard har vissa element förinställda egenskaper för padding och margin. Detta är gjort för att säkerställa att en webbsida är läsbar även utan några stilar.
Boxmodellen avgör hur mycket utrymme ett element upptar på en sida.
Den totala storleken på ett element beror på innehållets storlek, utfyllnad (padding), kantlinje (border) och marginal (margin).
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
