CSS boksmodellen – Sådan fungerer den!

  Skrevet af: Redaktionen     09-10-2013     Skrevet i: CSS og CSS3, HTML + HTML5

Er du netop begyndt at lære CSS, så er CSS boksmodellen et af de punkter du bør have 100% styr på.

Ofte løber man under udarbejdelsen af sin hjemmeside ind i problemer med f.eks. divs, som ikke placerer sig som man havde forventet det, og det skyldes ofte, at man ikke har haft boksmodellen i tankerne, da man designede sit layout.

Enhver hjemmeside er bygget op omkring HTML elementer. Alle HTML elementer opfører sig som bokse. For at kunne styre, hvordan dine bokse placerer sig i forhold til hinanden på din side, kan du anvende margin, border, padding, height og width attributterne. Boksmodellen fortæller så, hvordan disse attributter påvirker dine html elementer/bokse.

Boksmodellen ser således ud:

Det virker simpelt, men alligevel er der mange der går galt i byen. Så lad os lige gennemgå det i detaljen.

Indholdet:
Dette kunne være noget tekstindhold inde i en div.

Padding:
Dette er afstanden fra dit indhold og ud til inderkanten af dit element. Inderkanten af dit element er starten på border.

Border:
Border er kanten på dit element. Denne kan også være forskellige tykkelser.

Margin:
Margin starter ved ydrekanten af din border. Margin angiver luften omkring elementet. Det er margin som bestemmer afstanden/luften fra et element til et andet element.

Den reelle bredde og højde på dit element afhænger altså af padding, border samt den angivne højde og bredde.

Eksempel:

Med css´en nedenfor har vi lavet en div-boks som er præcis 150px høj og 150px bred. Afstanden til de to andre elementer er 20px, fordi vi har en margin på 20 px. Summen af width, padding (højre + venstre) og border er, som i kan se, 150px.

.boksmodellen {
width: 100px;
height: 100px;
padding: 20px; /*denne skal ganges med 2, da der er padding på begge sider af div´en*/
border: 5px;  /*denne skal ganges med 2, da der er en border på begge sider af div´en*/
margin: 20px;
background-color:#f2f2f2; 
border-color: #333;
border-style: solid;
}

Regnestykket ser således ud:
Bredde = width(100px) + padding (20px*2) + Border (5px*2) = 150px
Højde = height(100px) + padding (20px*2) + Border (5px*2) = 150px

Med margin ville denne boks placere sig i forhold til andre elementer som vist nedenfor. Der er 20px mellem de små røde bokse og den store. Ved siden af er den samme div-boks vist bare uden margin (margin: 0px;):

Nu skulle boksmodellen gerne være skåret ud i pap, og du burde være klar til at give dig i kast med dine første CSS layouts. Vil du gerne lære mere CSS, så start vores gratis CSS videokursus her: Gratis CSS videokursus for begyndere