Margin, öğelerin çevresinde tanımlanmış sınırların dışında boşluk oluşturmak için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div>70px margin yani kenar boşluğu bırakıldı</div>
</body>
</html> 
CSS kenar boşluğu özellikleri, öğelerin çevresinde, tanımlanmış sınırların dışında boşluk oluşturmak için kullanılır.
CSS ile kenar boşlukları üzerinde tam kontrole sahip olursunuz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) kenar boşluğunu ayarlamaya yönelik özellikler vardır.
CSS, bir öğenin her bir tarafı için kenar boşluğunu belirlemeye yönelik özelliklere sahiptir:
margin-topmargin-rightmargin-bottommargin-left
Tüm kenar boşluğu özellikleri aşağıdaki değerlere sahip olabilir:
- auto – tarayıcı hesaplar
- length – kenar boşluğu cm,px,pt cinsinden belirtilir
- % – % cinsinden kenar boşluğu verilir.
- inherit – kenar boşluğu ana ögeden alınır
Margin özelliğinin 4 değeri varsa ;
margin: 25px 50px 75px 100px;
Kenar boşluğu kısaltma özelliğini dört değerle kullanma örneği:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>div etiketinde üst margin 25px, sağ margin 50px, alt margin 75px, sol margin 100px.</div>
</body>
</html> 
margin’de 3 değer varsa;
margin: 25px 50px 75px;
üst kenar boşluğu 25 px
sağ ve sol kenar boşlukları 50 px
alt kenar boşluğu 75 px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>div etiketinde üst margin 25px, sağ ve sol margin 50px, alt margin 75px.</div>
</body>
</html> 
margin’de 2 değer varsa;
margin: 25px 50px;
üst ve alt kenar boşlukları 25 px
sağ ve sol kenar boşlukları 50 px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>div etiketinde üst ve alt margin 25px, sağ ve sol margin 50px.</div>
</body>
</html> 
margin’de tek değer varsa;
margin: 25px;
her kenar boşluğu 25px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>div etiketinde bütün margin değerleri 25px</div>
</body>
</html> 
auto Değeri
Öğeyi kapsayıcısı içinde yatay olarak ortalamak için marj özelliğini auto olarak ayarlayabilirsiniz.
Öğe daha sonra belirtilen genişliği kaplayacak ve kalan alan sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div>div etiketinde margin auto ayarlandı</div>
</body>
</html> 
inherit Değeri
Aşağıdaki örnek, <p class=”ex1″> öğesinin sol kenar boşluğunun üst öğeden (<div>) devralınmasını göstermektedir:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<div>
<p class="ex1">Bu paragrafta div öğesinden devralınan bir sol kenar boşluğu var.</p>
</div>
</body>
</html>
