Bir HTML elementi ile çevresindeki diğer html elementleri arasına boşluk boşluk koymaya yarar.
Bu boşlukları üst, sol, alt ve sağ için ayrı ayrı belirleyebildiğimiz gibi tek bir css koduyla da bu boşluları belirleyebilriz.
Tüm margin komutları:
margin-top - Üst kısımdan boşluk bırakır.
margin-right - Sağ kısımdan boşluk bırakır.
margin-bottom - Alt kısımdan boşluk bırakır.
margin-left - Sol kısımdan boşluk bırakır.
margin - Tüm kısımlardan boşluk bırakır.
Alabileceği değerler:
auto - Tarayıcılar tarafından otomatik ayarlanır
px - piksel olarak boşluk belirtme
% - İçerik genişliğine göre yüzdelik oranlama ile
Ayrı Ayrı Dış Boşlukları Ayarlamak
Kod:
.divim
{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
}
Yukarıdaki örnekte divin üst ve alt kısmında 20px, sağ ve sol kısmında 30 piksellik boşluklar bırakacaktır.
Dış Boşlukları Tek Seferde Ayarlarmak için sırasıyla üst, sağ, alt, sol şeklinde değerler yazarak da 4 bölgeyi tek satırda yazabiliriz.
Kod:
.divim
{
/* Dağılımı: margin: [üst] [sağ] [alt] [sol] */
margin: 20px 30px 20px 30px
}
Eğer div dışına vereceğimiz boşlukta yukarı ve alt değerler ile Sağ ve sol değerler aynı olacaksa aşağıdaki şekilde kullanabiliriz.
Kod:
.divim
{
/* Dağılımı: margin: [üst|alt] [sağ|sol] */
margin: 10px 20px;
}