İÇİNDEKİLER
Merhabalar,
Daha önce ki CSS dersimde CSS’de Kenarlıklar (Borders) Kullanımı‘nı anlatmıştım. Bu yazımda ise Margin (Kaydırma) Css özelliğini kullanımını anlatacağım. CSS’de Margin Kullanımı oldukça basittir. Bu yazımda elimden geldiğince CSS’de Margin Kullanımı detaylı olarak sizlere aktaracağım.
Yazıma başlamadan önce daha önce ki css derslerime aşağıda ki bağlantıları kullanarak ulaşabilirsiniz.
HTML elementleri bir sayfada yer işgal ederler.Bu elementlerin dış kısmında kalan boşluklarına margin denir.Diğer bir deyişle html elementlerin kenarlıklarının dışında kalan ve diğer elementlerle ayrılmasını sağlayan saydam alana margin diyoruz.CSS margin özellikleri ise bu saydam dış boşluğu ayarlamak için kullanılır.
Bir HTML elementin her yönüne (üst, alt,sağ,sol) margin tanımlamak için CSS de 4 tane margin parametresi vardır.
Yukarıda verdiğim bu 4 tane margin (kaydırma) parametreleri aşağıda verdiğim 4 tane değeri alabilirler. Yani, yukarıda ki css margin parametlerinin her biri aşağıda ki değerleri alabilirler.
Yukarıda bahsettiğim parametrelerin ve değerlerin örnek kullanımı aşağıda ki örnekte ki gibidir.
p { margin: 0 auto; } p { margin: 20px 40px; } p { margin: 0 50%; } p { margin: inherit; }
Aşağıda verdiğim margin parametrelerini ayrı ayrı vermek yerine sadece margin: parametresini kullanabilir ve bütün değerleri verebilirsiniz. Bu özelliğin amacı CSS kodlarını kolay ve hızlı yazabilmek için kullanılmaktadır.
Margin Parametreleri:
Bütün bu parametreleri tek bir satırda ve kısaltılmış özellik olan margin parametresinde kullanabiliriz. Nasıl mı ? Örnek kullanımı aşağıda ki gibidir.
div { margin: 20px 30px 40px 80px; }
Eğer margin özelliği 4 değer almış ise:
margin: 20px 30px 40px 80px;
Eğer margin özelliği 3 değer almış ise:
margin: 20px 30px 40px;
Eğer margin özelliği 2 değer almış ise:
margin: 40px 50px;
Eğer margin özelliği tek değer almış ise:
margin: 60px;
CSS’in margin özelliği html elementlerin arasındaki mesafeyi ayarlamak için kullanıldığı kadar, elementleri sayfada ortalama (center) için de sıkça kullanılır.Bunun için margin özelliğinin auto değeri kullanılır.Auto değeri tarayıcıların dış boşlukları otomatik olarak algılamasını ve her iki yönden eşit boşluk bırakmasını sağlar.
[label style=”red”]Not :[/label] Bu özelliği kullanabilmek için margin:auto değeri verilen elementin blok düzeyi element olması gerekir.
Örnek kullanımı:
div { width: 400px; margin: auto; }
CSS margin özelliği html elementlerin, diğer html elementlerine göre ayarlanmasında kullanıldığı için CSS de oldukça önemli bir yere sahiptir. CSS Margin konusunu iyi anlamak için CSS kutu modelini iyi anlamanız gerekir.
Bu ders yazım da CSS’in margin özelliğinin kullanımı ve margin özelliğinin nasıl kullanılacağı anlatılmıştır.Ayrıca web sayfalarında sıkça uygulanan ortalama işleminin css margin özelliği ile nasıl gerçekleştirileceği anlatılmıştır.Bir sonraki css ders yazımda margin özelliğinin tersi gibi çalışan css padding konusuna değineceğim.
Esen kalın…
Blog yazarı, Arayüz geliştiricisi ve Arkaplan geliştiricisi olmak için çalışmalar yapıyor.
Bu eser Creative Commons Atıf-GayriTicari-Türetilemez 4.0 Uluslararası Lisansı ile lisanslanmıştır.
Bu lisansın kapsamı dışındaki izinler Kullanım Koşulları adresinde mevcut olabilir.
Kimler Neler Demiş?