CSS ramme model oversigt

CSS-boksmodellen (Box Model) definerer, hvordan elementbokse håndterer elementindhold,indrykning,kantbånd og Margen måde.

CSS ramme model oversigt

CSS ramme model

Det indreste område af elementboksen er det faktiske indhold, og indrykningen omgiver indholdet direkte. Indrykning præsenterer elementets baggrund. Kantens kant er kantbåndet. Uden for kantbåndet er mærgen, som er standardvis transparent og vil ikke forstyrre nogen elementer bagved.

Vedligeholdelse:Baggrund anvendes på området dannet af indhold, indrykning og kant.

Indrykning, kant og margen er valgfri, standardværdien er nul. Men mange elementer vil blive sat af brugeragentens stilmesser. Disse kan overstyres ved at sætte elementets margin og padding til nul. Dette kan gøres separat eller ved at bruge en universal vælger til at sætte alle elementer:

* {
  margin: 0;
  padding: 0;
}

I CSS refererer width og height til indholdets bredde og højde. Øgelse af indrykning, kant og margen påvirker ikke indholdets størrelse, men øger elementboksens samlede størrelse.

Antag, at hver kant af boksen har 10 pixels margen og 5 pixels indrykning. Hvis du vil, at elementboksen skal nå 100 pixels, skal du sætte indholdets bredde til 70 pixels. Se billedet nedenfor:

CSS ramme model eksempel 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Vedligeholdelse:Indrykning, kant og margen kan anvendes på alle kanter af et element eller kun på en enkelt kant.

Vedligeholdelse:Margen kan være negativ, og i mange tilfælde skal man bruge negativ margen.

Browserkompatibilitet

Når du har indstillet en passende DTD for siden, vil de fleste browsere vise indholdet som vist i skærmbilledet ovenfor. Dog viser IE 5 og 6 det forkert. Ifølge W3C's standarder bestemmer elementindholdets plads width-attributten, mens padding og border-værdierne omregnes separat. Desværre bruger IE5.X og 6 deres egen ikke-standardmodel i krigsmodus. Width-attributten i disse browsere er ikke indholdets bredde, men summen af indhold, indrykning og kantbredde.

Selvom der er metoder til at løse dette problem. Men den bedste løsning i øjeblikket er at undgå dette problem. Altså, giv ikke elementer indre marginer med angivet bredde, men prøv i stedet at tilføje indre og ydre marginer til elementets forældre- og børneelementer.

Terminologi oversættelse

  • element: element.
  • padding: indre margin, nogle kilder oversætter det også til fyld.
  • border: kant.
  • margin: ydre margin, nogle kilder oversætter det også til tomrum eller tom kant.

På codew3c bruger vi padding og margin ens som indre og ydre marginer. Det tomme rum inden for kanten er indre margin, og det tomme rum uden for kanten er ydre margin, er det nemt at huske? )