Padding i margines

Margines

Margines określa przestrzeń wokół elementów. Możliwe jest stosowanie wartości negatywnych. Standardy CSS pozwalają na ustawienie marginesu:

  • lewego "margin-left"
  • prawego "margin-right"
  • góry "margin-top"
  • dołu "margin-bottom"

W pliku CSS można zdefiniować margines w następujący sposób:

#kod {
margin: 10px 10px 10px 10px;
}

Powyższy kod określa margines, który wynosi 10 pikseli z każdej strony {margin:’margin-top’ ‘margin-right’ ‘margin-bottom’ ‘margin-left’} .

Jeśli chcemy aby margines był taki sam dla każdgo boku możemy użyć następującego kodu:

#kod {
margin: 10px;
}

Padding

Padding również określa przestrzeń wokół elementów. Standardy CSS pozwalają na następujące ustawienia:

  • lewy "padding-left"
  • prawy "padding-right"
  • góra "padding-top"
  • dół "padding-bottom"

#kod {
padding:’padding-top’ ‘padding-right’ ‘padding-bottom’ ‘padding-left’;
}

Różnica pomiędzy paddingiem i marginesem

Padding określa przestrzeń wokół danego elementu, np: <p> lub >div>, natomiast margines przestrzeń pomiędzy elementami.

obraz

Jak widać na rysunku, padding oznaczony jest kolorem niebieskim. Okresla on wielkość przestrzeni wokół elementu <p>. Element ten posiada również margines zaznaczony kolorem pomarańczowym. Jest to odleglość od brzegu elemenu <body>.