Właściwość margin

Właściwość margin ustawia zewnętrzny odstęp elementu. Wartością właściwości są dowolne jednostki wymiarów lub kluczowa właściwość auto, pozwalająca przeglądarce samodzielnie obliczać odstęp elementu. Domyślnie każda przeglądarka może dodawać elementom różne odstępy.

Właściwość jest skrótem dla właściwości margin-top, margin-right, margin-bottom, margin-left.

Składnia

cssselektor {
  margin: wartość;
}

Liczba wartości

Właściwość margin przyjmuje 1, 2, 3 lub 4 wartości, wymieniane z spacją:

Przykład

Teraz będziemy mieli blok bez odstępów:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Przykład

A teraz blokowi ustawimy odstęp 10px:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Przykład

Ustawmy blokowi odstęp 10px od góry i od dołu oraz 20px - od lewej i od prawej:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Przykład

Ustawmy blokowi odstęp 5px od góry, 15px od prawej, 25px od dołu i 35px od lewej:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Zobacz też