Margin

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 35 / 76.

CSS'te margin, herhangi bir tanımlanmış kenarlığın dışındaki, bir öğenin etrafındaki boşluktur. Kutu modelinin (box model) bir diğer temel parçasıdır. Marginler, öğeler arasında boşluk oluşturmak ve onları birbirinden ayırmak için kullanılır.

Bir öğenin dört tarafındaki (üst, sağ, alt ve sol) kenar boşluğunu (margin) bağımsız olarak veya kısa yazım notasyonu kullanarak kontrol edebilirsiniz.

İşte margin özelliğini kullanmak için temel sözdizimi:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Öğenin üst tarafındaki kenar boşluğu.
margin-right: Öğenin sağ tarafındaki kenar boşluğu.
margin-bottom: Öğenin alt tarafındaki kenar boşluğu.

margin-left: Öğenin sol tarafındaki kenar boşluğu.
value: Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilebilen istenen kenar boşluğu değeri.

Dört tarafın kenar boşluğunu aynı anda ayarlamak için kısa yazım notasyonunu da kullanabilirsiniz, örneğin:

p {
    margin: 20px; /* Dört tarafın tamamına aynı kenar boşluğunu uygular */
}

div {
    margin: 10px 25px; /* Üst ve alt kenar boşluğunu 10px, sol ve sağ kenar boşluğunu 25px olarak ayarlar */
}

.button {
    margin: 15px 30px 10px 5px;/* Her bir taraf için kenar boşluğunu ayrı ayrı ayarlar */
}

Bu örnekte, tüm <p> öğeleri her taraftan 20px kenar boşluğuna sahiptir, tüm <div> öğeleri 10px üst ve alt kenar boşluğu ile 25px sol ve sağ kenar boşluğuna sahiptir ve button sınıfına sahip tüm öğeler 15px üst kenar boşluğu, 30px sağ kenar boşluğu, 10px alt kenar boşluğu ve 5px sol kenar boşluğuna sahiptir.

Görev

Kolay

Bir başlık (<h1>) ve bir bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğelerin etrafına boşluk eklemek için margin özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. Her taraftaki margin değerini 20px olarak ayarlayın.
<div> öğesini hedefleyen bir CSS kuralı yazın. Üst ve alt margin değerini 10px, sol ve sağ margin değerini ise 30px olarak ayarlayın.

Kopya kağıdı

margin özelliği, herhangi bir kenarlığın dışında, bir öğenin etrafında boşluk oluşturur. Kenar boşluğunu dört tarafın her biri için bağımsız olarak kontrol edebilir veya kısa yazım notasyonunu kullanabilirsiniz.

Bireysel kenar boşluğu özellikleri:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

Kısa yazım notasyonu:

/* Tüm kenarlarda aynı kenar boşluğu */
margin: 20px;

/* Üst/alt: 10px, Sol/sağ: 25px */
margin: 10px 25px;

/* Üst: 15px, Sağ: 30px, Alt: 10px, Sol: 5px */
margin: 15px 30px 10px 5px;

Kendin dene

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>