• Metadata
• Referanser
• Poster med lik tag

TIL Border box

Det er to måter å se border-box på; “content-box” og “border-box”

content-box (standard) - Når vi setter en høyde eller bredde på et html element så betyr det at vi kun setter størrelsen på innholdet til elementet. Padding og margin kommer da i tillegg.

Eksempel:

.my-div {
    width: 100px;
    padding: 10px;
}

En <div> har en bredde på 100px og en padding på 10px. Elementet vil da ta opp 120px totalt (1oo + 2*10).

border-box - Her er padding og border inkludert i totalbredden/totalhøyden. En <div> med følgende styling:

.my-div2 {
    width: 100px;
    box-sizing: border-box;
}

Vil være 100 pixels bred, uansett hvilken padding eller border som blir lagt på.

Et lurt triks kan være å sette border-box til alle elementer så slipper man unna matematikken.

* {
    box-sizing: border-box;
}