NemProgrammering.dk logo

CSS boksmodellen – Sådan fungerer den!

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

kursuscsEr 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:

box-model

 

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;):

margin

 

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

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.

  • Dan siger:

    Hvis man er træt af at skulle beregne højde og brede når man bruger padding. Kan man med fordel anvende det som i daglig dagen bliver kaldt for box-sizing hack’et.

    Box-sizing hack’et er simpelt og gør egentlig bare at din padding og border bliver en del af den egentlige størrelse af det element du styler, det ser sådan her ud:

    html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }

  • Jesper siger:

    Dejligt let og enkelt beskrevet, en fornøjelse at læse. I gør et fantastisk stykke arbejde her på nemprogrammering.dk med at lære hvordan man koder html, hmtl5, css samt css3.