Basis van webtechnologie
.card {
box-sizing: content-box;
width: 200px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}Wat is voor het element met de bovenstaande CSS de breedte van de buitenkant van de linkerrand van de border tot de buitenkant van de rechterrand van de border?
- A200px
- B224px
- C264px
Antwoord en toelichting tonen
Antwoord: B. 224px
In het CSS-boxmodel bestaat een element van binnen naar buiten uit de inhoud (content), de padding, de border en de margin. Met box-sizing: content-box (de standaardwaarde) is width alleen de breedte van de inhoud, dus de breedte tot de buitenkant van de border is 200 + 10 × 2 + 2 × 2 = 224px. De margin is de ruimte buiten de border en vormt de afstand tot andere elementen. Met box-sizing: border-box omvat width alles tot en met de border, en wordt de breedte van de inhoud 200 − 24 = 176px.