CSS (Cascading Style Sheets), web sayfalarının stilini belirlemek için kullanılan bir dilidir. Bu dil, öğelerin düzenini ve görünümünü kontrol etmek için bir dizi özellik içerir. Bu yazıda, özellikle “margins” yani marjlar konusuna odaklanacağız.
1. Temel Marjlar (Top, Right, Bottom, Left):
Temel marjlar, bir öğenin dört tarafında yer alan boşluklardır. margin-top, margin-right, margin-bottom, ve margin-left özellikleri ile belirlenir. Örneğin:
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
Yukarıdaki örnek, bir div öğesine üstten 10 piksel, sağdan 20 piksel, alttan 30 piksel ve soldan 40 piksel marj ekler.
2. Kısa Yol:
Temel marjları aynı değerde belirlemek için kısa bir yol da vardır:
div { margin: 10px 20px 30px 40px; }
Bu örnekte sırasıyla üst, sağ, alt ve sol marjları belirliyoruz.
Eğer sadece üst ve sol marjları belirlemek istiyorsanız:
div {
margin: 10px 0;
}
Bu durumda, üst marj 10 piksel olacak, sağ marj sıfır, alt marj sıfır, ve sol marj 0 piksel olacaktır.
3. Otomatik Marjlar:
Bir öğenin otomatik marjları, öğenin kendi boyutu içinde nasıl hizalanacağını kontrol etmek için kullanılır. Örneğin:
div {
margin-left: auto;
margin-right: auto;
}
Yukarıdaki örnek, bir div öğesini yatayda ortalamak için kullanılır.
4. Marjları Sıfırlamak:
Marjları sıfırlamak için, aşağıdaki gibi bir yöntem kullanılabilir:
div {
margin: 0;
}
Bu, üst, sağ, alt ve sol marjları sıfırlayacaktır.
5. Yüzde Bazlı Marjlar:
Marjları yüzde olarak belirlemek de mümkündür. Örneğin:
div {
margin-top: 5%;
margin-bottom: 5%;
}
Bu, bir öğenin üst ve alt marjlarını ekrana göre dinamik olarak ayarlar.
Marjlar, CSS’de düzen ve tasarımı kontrol etmek için önemli bir araçtır. İhtiyacınıza göre marjları kullanarak, sayfalarınızın düzenini daha etkili bir şekilde yönetebilirsiniz.