Overview of CSS frame model

De CSS-kastmodel (Box Model) bepaalt hoe elementkaders omgaan met elementeninhoud,PaddingenBorder en Marge manier.

Overview of CSS frame model

CSS frame model

Het innerste deel van het elementkader is de daadwerkelijke inhoud, omgeven door padding. De padding presenteert de achtergrond van het element. De rand van de padding is de border. Buiten de border is de marge, de standaardwaarde van de marge is transparant, dus het blokkeert geen elementen achter zich.

Tip:De achtergrond wordt toegepast op het gebied dat bestaat uit inhoud en padding, border.

Padding, border en marge zijn optioneel; de standaardwaarde is nul. Veel elementen worden echter ingesteld door de gebruikersstijlstijl van de browser. Deze stijlen kunnen worden overschreven door de margin en padding van een element op nul in te stellen. Dit kan afzonderlijk worden gedaan, of door een algemene selector voor alle elementen in te stellen:

* {
  margin: 0;
  padding: 0;
}

In CSS verwijzen width en height naar de breedte en hoogte van het inhoudsgebied. Het toevoegen van padding, border en marge beïnvloedt niet de maat van het inhoudsgebied, maar verhoogt de totale maat van het elementkader.

Stel dat elke kant van de kast 10 pixels marge en 5 pixels padding heeft. Als je deze elementkast 100 pixels breed wilt hebben, moet je de breedte van de inhoud instellen op 70 pixels, zie de afbeelding hieronder:

CSS frame model example 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

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

Tip:De marge kan negatieve waarden hebben en in veel gevallen moet een negatieve marge worden gebruikt.

Browserkompabiliteit

Zodra een juiste DTD voor de pagina is ingesteld, zullen de meeste browsers de inhoud weergeven zoals weergegeven in de afbeelding hierboven. Echter, de weergave van IE 5 en 6 is incorrect. Volgens de specificaties van de W3C wordt de ruimte ingenomen door de elementeninhoud door de width-eigenschap ingesteld, terwijl de padding en border-waarden apart worden berekend. Helaas gebruiken IE5.X en 6 hun eigen niet-standaard model in de Quirks-modus. De width-eigenschap van deze browsers is niet de breedte van de inhoud, maar de som van de breedte van de inhoud, de padding en de border.

Although there are methods to solve this problem. But the best solution at present is to avoid this problem. That is, do not add inner padding with specified width to the element, but try to add inner padding or outer padding to the parent element and child element of the element.

Term translation

  • element: element.
  • padding: inner padding, also known as filling in some materials.
  • border: border.
  • margin: outer margin, also known as blank or blank edge in some materials.

At codew3c, we uniformly call padding and margin inner padding and outer padding. The blank space within the border is the inner padding, and the blank space outside the border is the outer padding. Is it easy to remember:）