CSS frame model

CSS frame model

Alle HTML-elementen kunnen worden gezien als kaders. In CSS, wanneer het gaat om ontwerp en lay-out, worden de termen 'box model' of 'balkmodel' gebruikt.

Het CSS schakelmodel is eigenlijk een kader dat elke HTML-element omringt. Het omvat: buitenmarge, rand, binnenmarge en het daadwerkelijke inhoud. De onderstaande afbeelding toont het schakelmodel:

CSS frame model

Verklaring van de verschillende delen:

  • Inhoud - Het inhoudskader, waarin tekst en afbeeldingen worden weergegeven.
  • Binnenmarge - Wis het gebied rond de inhoud. De binnenmarge is transparent.
  • Rand - Omringt de binnenmarge en het inhoudskader.
  • Marge - Wis het gebied buiten de rand. De marge is transparent.

Het schakelmodel stelt ons in staat om randen toe te voegen aan elementen en de ruimte tussen elementen te definiëren.

Het innerste gedeelte van het elementkader is het daadwerkelijke inhoud, direct omringd door de inbuismarge. De inbuismarge presenteert de achtergrond van het element. De rand van de inbuismarge is de rand. Buiten de rand is de marge, de marge is standaard transparent en blokkeert geen elementen achter zich.

Tip:Achtergrond wordt toegepast op het gebied dat bestaat uit inhoud, binnenmarge en rand.

Binnenmarge, rand en marge zijn optioneel, de standaardwaarde is nul. Maar, vele elementen worden ingesteld door de gebruikersagentstijlstijl voor marge en inbuismarge. U kunt deze browserstijlen overschrijven door de marge en inbuismarge van het element op nul in te stellen. Dit kan apart worden gedaan, of door een algemene selectie voor alle elementen in te stellen:

* {
  marge: 0;
  inbuismarge: 0;
}

In CSS verwijzen width en height naar de breedte en hoogte van het inhoudsgebied. Het toevoegen van binnenmarge, rand en marge beïnvloedt niet de maat van het inhoudsgebied, maar vergroot de totale maat van het elementenkader.

Stel dat elke zijde van het kader 10 pixels buitenmarge en 5 pixels inbuismarge heeft. Als u wilt dat deze elementenbalk 100 pixels bereikt, moet u de breedte van de inhoud instellen op 70 pixels, zie de onderstaande afbeelding:

CSS frame model example 
#box {
  breedte: 70px;
  marge: 10px;
  inbuismarge: 5px;
}

Tip:Binnenmarge, rand en marge kunnen worden toegepast op alle kanten van een element, of op een enkele kant.

Tip:De buitenmarge kan negatieve waarden hebben en wordt in veel gevallen negatieve waarden voor de buitenmarge gebruikt.

Voorbeeld

Demonstreer het schakelmodel:

div {
  breedte: 300px;
  rand: 15px vast groen;
  inbuismarge: 50px;
  marge: 20px;
}

Probeer het zelf

Breedte en hoogte van het element

Om de breedte en hoogte van het element correct in te stellen in alle browsers, moet u weten hoe het schakelmodel werkt.

Belangrijke waarschuwing:Bij het instellen van de width- en height-eigenschappen van een element met CSS, hoeft u alleen de breedte en hoogte van het inhoudsgebied in te stellen. Om de volledige grootte van het element te berekenen, moet u ook de binnenmarge, rand en marge toevoegen.

Voorbeeld

<div> Elementbreedte zal 350px zijn:

div {
  breedte: 320px;
  vulling: 10px;
  rand: 5px vast grijs;
  marge: 0; 
}

Probeer het zelf

Berekening als volgt:

320px (breedte)
+ 20px (links + rechter binnenmarge)
+ 10px (links + rechter rand)
+ 0px (links + rechts buitengewicht)
= 350px

De totale breedte van het element moet op deze manier worden berekend:

Totale breedte van het element = breedte + linker binnenmarge + rechter binnenmarge + linker rand + rechter rand + linker buitengewicht + rechter buitengewicht

De totale hoogte van het element moet op deze manier worden berekend:

Totale hoogte van het element = hoogte + bovenste binnenmarge + onderste binnenmarge + bovenste rand + onderste rand + bovenste buitengewicht + onderste buitengewicht