Uitdaging: Pas Box-Sizing Toe op Elementen
Taak
Ontdek de praktische verschillen tussen de waarden content-box en border-box voor de eigenschap box-sizing. Je taak is als volgt:
- Pas de waarde
content-boxtoe op de eigenschapbox-sizingvoor het element met het idcontent-box. - Pas de waarde
border-boxtoe op de eigenschapbox-sizingvoor het element met het idborder-box.
index.html
index.css
box-sizing: content-box: Breedte en hoogte sluiten padding en rand uit.box-sizing: border-box: Breedte en hoogte omvatten padding en rand.
index.html
index.css
Uitleg
- De eerste box gebruikt
content-box(de standaardinstelling). Breedte en hoogte zijn alleen van toepassing op de inhoud, waardoor padding en border de uiteindelijke grootte vergroten tot meer dan 200×200px; - De tweede box gebruikt
border-box. Breedte en hoogte omvatten inhoud, padding en border, waardoor de totale grootte precies 200×200px blijft.
Hierdoor is de eerste box zichtbaar groter, terwijl de tweede consistent blijft ongeacht toegevoegde padding of border.
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 3. Hoofdstuk 4
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Geweldig!
Completion tarief verbeterd naar 2.56
Uitdaging: Pas Box-Sizing Toe op Elementen
Veeg om het menu te tonen
Taak
Ontdek de praktische verschillen tussen de waarden content-box en border-box voor de eigenschap box-sizing. Je taak is als volgt:
- Pas de waarde
content-boxtoe op de eigenschapbox-sizingvoor het element met het idcontent-box. - Pas de waarde
border-boxtoe op de eigenschapbox-sizingvoor het element met het idborder-box.
index.html
index.css
box-sizing: content-box: Breedte en hoogte sluiten padding en rand uit.box-sizing: border-box: Breedte en hoogte omvatten padding en rand.
index.html
index.css
Uitleg
- De eerste box gebruikt
content-box(de standaardinstelling). Breedte en hoogte zijn alleen van toepassing op de inhoud, waardoor padding en border de uiteindelijke grootte vergroten tot meer dan 200×200px; - De tweede box gebruikt
border-box. Breedte en hoogte omvatten inhoud, padding en border, waardoor de totale grootte precies 200×200px blijft.
Hierdoor is de eerste box zichtbaar groter, terwijl de tweede consistent blijft ongeacht toegevoegde padding of border.
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 3. Hoofdstuk 4