Balkmodel: CSS-marge

De lege ruimte die om de rand van het element heen gaat is de marge. Het instellen van de marge creëert extra 'ruimte' buiten het element.

De eenvoudigste manier om marge in te stellen is met de marge-eigenschap, deze accepteert elke lengte-eenheid, percentages en zelfs negatieve waarden.

CSS Margin Eigenschap

De eenvoudigste manier om marge in te stellen is met De marge-eigenschap.

De marge-eigenschap accepteert elke lengte-eenheid, zoals pixels, inches, millimeters of em.

De waarde van marge kan worden ingesteld op auto. Een常见er gebruik is het instellen van een lengte-eenheid voor de marge. De volgende verklaring stelt een marge van 1/4 inch breed in voor alle kanten van het h1-element:

h1 {marge: 0.25in;}

Hieronder ziet u een voorbeeld waarin de vier randen van het h1-element verschillend zijn ingesteld, de gebruikte eenheden zijn pixels (px):

h1 {marge: 10px 0px 15px 5px;}

Net als bij de instelling van de binnenmarge, begint de volgorde van deze waarden bij de bovenmarge (top) en draait ze in de richting van de elementen in de klokrichting:

marge: top right bottom left

Daarnaast kan je ook een procentwaarde instellen voor marge:

p {marge: 10%;}

Procentwaarden worden berekend ten opzichte van de breedte van het ouder-element. In dit voorbeeld is de marge van het p-element 10% van de breedte van het ouder-element.

De standaardwaarde van marge is 0, dus als er geen waarde is aangegeven voor marge, verschijnt er geen marge. Maar in de praktijk bieden browsers alvast vooraf gedefinieerde stijlen voor veel elementen, inclusief marges. Bijvoorbeeld, in browsers die CSS ondersteunen, worden er voor elke paragraaf een 'lege regel' boven en onder geplaatst. Dus als er geen marge is aangegeven voor het p-element, kan de browser zelf een marge toepassen. Natuurlijk, als je specifiek een verklaring hebt gedaan, wordt de standaardstijl overschreven.

Waarde-kopiëren

Herinner je je nog? We hebben in de vorige twee secties over waarde-kopiëren gesproken. Hier leggen we je uit hoe je waarde-kopiëren kunt gebruiken.

Soms voeren we enkele herhaalde waarden in:

p {marge: 0.5em 1em 0.5em 1em;}

Door waarden te kopiëren, hoef je deze cijfers niet opnieuw in te voeren. De bovenstaande regel is equivalent aan de onderstaande regel:

p {marge: 0.5em 1em;}

Deze 2 waarden kunnen de vorige 4 waarden vervangen. Hoe doet het dit? CSS definieert enkele regels die het toestaan om minder dan 4 waarden voor de marges te specificeren. De regels zijn als volgt:

  • Als de waarde van de linkermarge ontbreekt, wordt de waarde van de rechtermarge gebruikt.
  • Als de waarde van de ondermarge ontbreekt, wordt de waarde van de bovenmarge gebruikt.
  • Als de waarde van de rechtermarge ontbreekt, wordt de waarde van de bovenmarge gebruikt.

Het volgende diagram biedt een meer directe manier om dit te begrijpen:

CSS Waarde Kopiëren

In andere woorden, als er 3 waarden zijn gespecificeerd voor de marges, wordt de 4e waarde (dat wil zeggen, de linkermarge) gekopieerd van de 2e waarde (de rechtermarge). Als er 2 waarden zijn gegeven, wordt de 4e waarde gekopieerd van de 2e waarde, en de 3e waarde (de ondermarge) van de 1e waarde (de bovenmarge). In de laatste situatie, als er maar één waarde is gegeven, worden de andere 3 marges gekopieerd van deze waarde (de bovenmarge).

Gebruik deze eenvoudige mechanisme, je hoeft alleen de benodigde waarden te specificeren, zonder dat je alle 4 waarden hoeft toe te passen, bijvoorbeeld:

h1 {marge: 0.25em 1em 0.5em;}	/* equivalente aan 0.25em 1em 0.5em 1em */
h2 {marge: 0.5em 1em;}		/* equivalente aan 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Equivalent to 1px 1px 1px 1px */

This method has a small drawback, and you will definitely encounter this problem. Suppose you want to set the top and left margins of the p element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:

p {margin: 20px 30px 30px 20px;}

This is how you get the result you want. Unfortunately, in this case, there is no way to reduce the number of values needed.

Let's look at another example. If you want all margins except the left margin to be auto (the left margin is 20px):

p {margin: auto auto auto 20px;}

Similarly, this is how you get the effect you want. The problem is that typing these auto values can be麻烦. If you just want to control the margin on a single edge of an element, please use the single edge margin property.

Single Edge Margin Properties

You can use a single edge margin property to set the margin value for a single edge of an element. Suppose you want to set the left margin of the p element to 20px. You don't have to use margin (you need to type a lot of auto), but you can use the following method:

p {margin-left: 20px;}

You can use any of the following properties to set the margin for the corresponding side without affecting all other margins:

You can use multiple such single-edge attributes in one rule, for example:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Of course, in this case, using margin may be easier:

p {margin: 20px 30px 30px 20px;}

Whether using a single edge attribute or using margin, the result is the same. Generally speaking, if you want to set the margin for multiple sides, using margin will be easier. However, from the perspective of document display, actually using either method is not important, so you should choose the method that is easier for you.

Tips and Comments

Tip:Netscape and IE define the default margin (margin) value for the body tag as 8px. However, Opera is not the same. On the contrary, Opera defines the default value of the internal padding (padding) as 8px, so if you want to adjust the edge parts of the entire website and display them correctly in Opera, you must customize the padding of the body.

CSS Margin Example:

Set the left outer margin of the text
Dit voorbeeld demonstreert hoe de linker buitmarge van de tekst wordt ingesteld.
Instellen van de rechter buitmarge van de tekst
Dit voorbeeld demonstreert hoe de rechter buitmarge van de tekst wordt ingesteld.
Instellen van de bovenste buitmarge van de tekst
Dit voorbeeld demonstreert hoe de bovenste buitmarge van de tekst wordt ingesteld.
Instellen van de onderste buitmarge van de tekst
Dit voorbeeld demonstreert hoe de onderste buitmarge van de tekst wordt ingesteld.
Alle buitmarge-eigenschappen in een verklaring.
Dit voorbeeld demonstreert hoe alle buitmarge-eigenschappen in een verklaring worden ingesteld.

CSS Buitmarge Eigenschap

Eigenschap Beschrijving
margin Korte eigenschap. Stel alle buitmarge-eigenschappen in in een verklaring.
margin-bottom Stel de onderste buitmarge van het element in.
margin-left Stel de linker buitmarge van het element in.
margin-right Stel de rechter buitmarge van het element in.
margin-top Stel de bovenste buitmarge van het element in.