Programowanie mikrokontrolerów

Możemy zdefiniować odległości elementów definiowanych dzięki zastosowaniu dwóch podstawowych definicji:

• Margin - definiuje dystans od elementów otaczających definiowany element na zewnątrz tego elementu
• Padding - definiuje dystans od zawartości wewnątrz elementu

 Przykłady definiowania odległości elementów z wykorzystaniem komend margin i padding:

p {
  margin-top:    100px;
  margin-bottom: 100px;
  margin-right:  150px;
  margin-left:   80px;
  padding-top:    100px;
  padding-bottom: 100px;
  padding-right:  150px;
  padding-left:   80px;
}

Określenia po myślnikach określają którą z odległości od obiektu definiujemy:

• -top:        odległość od góry obiektu
• -bottom:  odległość od dołu obiektu
• -right:      odległość od strony prawej obiektu
• -left:        odległość od strony lewej obiektu

Wszystkie parametry mogą przyjmować następujące wartości:

• auto - przeglądarka wylicza wartość parametru 
• % - określa wartość parametru stanowiącą procent szerokości definiowanego elementu
• inherit - określa wartość parametru jako dziedziczoną od elementu nadrzędnego

Powyższe parametry mogą również przyjmować wartości ujemne.

Istnieje również prostrzy (skrócony) sposób definiowania elementów margin, padding który przedstawiono poniżej:

p {
  margin:   10px 15px 20px 30px;
  padding:  10px 15px 20px 30px;
}

W przedstawiony zapis interpretujemy przyjmując że kolejne cyfry określają kolejne odległości: top, right, bottom, left. Kolejność można łatwo zapamiętać wyobrażając sobie zegar. Pierwsza wartość to góra - "południe na tarczy zegara" i zgodnie z kierunkiem ruchu wskazówek zegara następują kolejno prawo, dół, lewo.