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żdego boku, możemy użyć:
#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.
Na powyższym rysunku padding oznaczony jest kolorem niebieskim i określa przestrzeń wokół elementu <p>. Margines zaznaczono kolorem pomarańczowym, określający odległość od brzegu elementu <body>.