Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Tillämpa Box-Sizing på Element | CSS-Boxmodellen och Elementavstånd
CSS-Grunder

bookUtmaning: Tillämpa Box-Sizing på Element

Uppgift

Utforska de praktiska skillnaderna mellan värdena content-box och border-box för egenskapen box-sizing. Din uppgift är följande:

  • Använd värdet content-box för egenskapen box-sizing på elementet med id content-box.
  • Använd värdet border-box för egenskapen box-sizing på elementet med id border-box.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Bredd och höjd exkluderar utfyllnad (padding) och ram (border).
  • box-sizing: border-box: Bredd och höjd inkluderar utfyllnad (padding) och ram (border).
index.html

index.html

index.css

index.css

copy

Förklaring

I detta exempel finns två div-element, där varje använder ett olika värde för egenskapen box-sizing:

  • Den första div:en har en röd ram och använder standardvärdet content-box för box-sizing. Trots att width och height är satta till 200px, läggs extra utrymme till genom padding och border, vilket gör att dimensionerna blir större än 200px åt båda hållen;
  • Den andra div:en har en blå ram och använder border-box som värde för box-sizing. Här ingår width och height i boxens totala dimensioner, så 200px och padding förblir border.

Vi kan observera skillnaden i storlek mellan de två boxarna, där den första är större på grund av extra utrymme från padding och border. Den andra boxen behåller en konstant storlek på 200px, inklusive padding och border.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you show me the CSS code for applying these box-sizing values?

Can you explain when to use content-box vs border-box in real projects?

What happens if I don't specify the box-sizing property?

Awesome!

Completion rate improved to 2.56

bookUtmaning: Tillämpa Box-Sizing på Element

Svep för att visa menyn

Uppgift

Utforska de praktiska skillnaderna mellan värdena content-box och border-box för egenskapen box-sizing. Din uppgift är följande:

  • Använd värdet content-box för egenskapen box-sizing på elementet med id content-box.
  • Använd värdet border-box för egenskapen box-sizing på elementet med id border-box.
index.html

index.html

index.css

index.css

copy
  • box-sizing: content-box: Bredd och höjd exkluderar utfyllnad (padding) och ram (border).
  • box-sizing: border-box: Bredd och höjd inkluderar utfyllnad (padding) och ram (border).
index.html

index.html

index.css

index.css

copy

Förklaring

I detta exempel finns två div-element, där varje använder ett olika värde för egenskapen box-sizing:

  • Den första div:en har en röd ram och använder standardvärdet content-box för box-sizing. Trots att width och height är satta till 200px, läggs extra utrymme till genom padding och border, vilket gör att dimensionerna blir större än 200px åt båda hållen;
  • Den andra div:en har en blå ram och använder border-box som värde för box-sizing. Här ingår width och height i boxens totala dimensioner, så 200px och padding förblir border.

Vi kan observera skillnaden i storlek mellan de två boxarna, där den första är större på grund av extra utrymme från padding och border. Den andra boxen behåller en konstant storlek på 200px, inklusive padding och border.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4
some-alt