Model ramki: Marginesy CSS

Pusta przestrzeń otaczająca krawędzie elementu to margines. Ustawienie marginesów tworzy dodatkową 'pustkę' poza elementem.

Najprostszym sposobem ustawienia marginesów jest użycie atrybutu marginesu, który akceptuje każdą jednostkę długości, wartości procentowe oraz ujemne wartości.

Atrybut margin CSS

Najprostszym sposobem ustawienia marginesów jest użycie Atrybut marginesu.

Atrybut marginesu akceptuje każdą jednostkę długości, może to być piksel, cal, milimetr lub em.

Margines można ustawić na auto. Częściej stosowanym rozwiązaniem jest ustawienie długości marginesów. Poniższe deklaracje ustawiają 1/4 cala szerokości pustki na każdej stronie elementu h1:

h1 {margin : 0.25in;}

Poniższy przykład pokazuje, jak dla czterech boków elementu h1 można zdefiniować różne marginesy, używane jednostki długości to piksele (px):

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

As with padding settings, the order of these values starts from the top margin (top) and rotates clockwise around the element:

margin: top right bottom left

In addition, you can also set a percentage value for margin:

p {margin: 10%;}

Percentages are calculated relative to the parent element's width. In this example, the margin set for the p element is 10% of the parent element's width.

The default value of margin is 0, so if no value is specified for margin, there will be no margin. However, in practice, browsers have provided predefined styles for many elements, and margins are no exception. For example, in browsers that support CSS, margins will generate 'empty lines' above and below each paragraph element. Therefore, if no margin is declared for the p element, the browser may apply a margin itself. Of course, as long as you make a special declaration, the default style will be overridden.

Value copying

Remember? We mentioned value copying in the first two sections. Below, we will explain how to use value copying.

Sometimes, we may enter some repeated values:

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

Through value copying, you do not need to repeatedly enter these numbers. The above rule is equivalent to the following rule:

p {margin: 0.5em 1em;}

These two values can replace the previous 4 values. How is this done? CSS defines some rules that allow fewer than 4 values to be specified for margins. The rules are as follows:

  • If the value of the left margin is missing, use the value of the right margin.
  • If the value of the bottom margin is missing, use the value of the top margin.
  • If the value of the right margin is missing, use the value of the top margin.

The following diagram provides a more intuitive way to understand this:

Kopia wartości CSS

In other words, if 3 values are specified for the margin, the fourth value (i.e., the left margin) will be copied from the second value (the right margin). If two values are given, the fourth value will be copied from the second value, and the third value (the bottom margin) will be copied from the first value (the top margin). In the last case, if only one value is given, then the other 3 margins are copied from this value (the top margin).

Using this simple mechanism, you only need to specify the necessary values, not all 4 values, for example:

h1 {margin: 0.25em 1em 0.5em;}	/* Equivalently 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* Equivalently 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Równoważne 1px 1px 1px 1px */

Ten sposób ma jedną małą wadę, z którą na pewno się napotkasz. Załóżmy, że chcesz ustawić górny i lewy margines elementu p na 20 pikseli, dolny i prawy margines na 30 pikseli. W tym przypadku, musisz napisać:

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

W ten sposób uzyskasz pożądany wynik. Niestety, w tym przypadku, liczba wymaganych wartości nie może być mniejsza.

Spójrzmy na inny przykład. Jeśli chcesz, aby wszystkie marginesy, oprócz lewego marginesu, były auto (lewy margines to 20px):

p {margin: auto auto auto 20px;}

Podobnie, w ten sposób uzyskasz pożądany efekt. Problemem jest to, że wpisywanie tych auto jest trudne. Jeśli chcesz kontrolować marginesy tylko jednego boku elementu, użyj atrybutów pojedynczych marginesów.

Atrybuty pojedynczych marginesów

Możesz użyć pojedynczych atrybutów marginesów, aby ustawić wartości marginesów dla pojedynczych boków elementu. Załóżmy, że chcesz ustawić lewy margines elementu p na 20px. Nie musisz używać marginesu (musisz wpisać wiele auto), ale możesz zamiast tego użyć następującego sposobu:

p {margin-left: 20px;}

Możesz użyć dowolnego z tych atrybutów, aby ustawić marginesy dla odpowiednich boków, bez bezpośredniego wpływu na inne marginesy:

Możesz użyć wielu takich pojedynczych atrybutów w jednej regule, na przykład:

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

Oczywiście, w tym przypadku, użycie marginesów może być łatwiejsze:

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

Bez względu na to, czy używasz pojedynczych atrybutów, czy marginesów, wynik jest taki sam. Ogólnie rzecz biorąc, jeśli chcesz ustawić marginesy dla wielu boków, użycie marginesów jest łatwiejsze. Jednakże, z punktu widzenia prezentacji dokumentu, nie ma znaczenia,哪种方法使用哪种方法, więc powinieneś wybrać ten, który jest dla ciebie łatwiejszy.

Wskazówki i komentarze

Wskazówka:Netscape i IE definiują domyślną wartość marginesu (margin) dla etykiety body jako 8px. Opera działa inaczej. Zamiast tego, Opera ustawia domyślną wartość wypełnienia (padding) jako 8px, więc aby poprawnie wyświetlić krawędzie całej witryny w Opera, musisz dostosować padding etykiety body.

Przykład zewnętrznego marginesu CSS:

Ustawienie lewego zewnętrznego marginesu tekstu
Ten przykład pokazuje, jak ustawić lewe marginesy tekstu.
Ustawienie prawych marginesów tekstu
Ten przykład pokazuje, jak ustawić prawe marginesy tekstu.
Ustawienie górnych marginesów tekstu
Ten przykład pokazuje, jak ustawić górne marginesy tekstu.
Ustawienie dolnych marginesów tekstu
Ten przykład pokazuje, jak ustawić dolne marginesy tekstu.
Wszystkie atrybuty marginesów w jednym deklaracji.
Ten przykład pokazuje, jak ustawić wszystkie atrybuty marginesów w jednym deklaracji.

Atrybuty marginesów CSS

Atrybut Opis
margin Atrybut skrócony. Ustawienie wszystkich atrybutów marginesów w jednym deklaracji.
margin-bottom Ustawienie dolnych zewnętrznych marginesów elementu.
margin-left Ustawienie lewych zewnętrznych marginesów elementu.
margin-right Ustawienie prawych zewnętrznych marginesów elementu.
margin-top Ustawienie górnych zewnętrznych marginesów elementu.