• Ücretsiz Eğitimlerimiz İle Sizlere Hizmet Vermekteyiz! Yeni Nesil Webmaster Forumu!

CSS Dersleri - 7

Konu Bilgileri

Konu Hakkında Merhaba, tarihinde Diğer kategorisinde Safak tarafından oluşturulan CSS Dersleri - 7 başlıklı konuyu okuyorsunuz. Bu konu şimdiye dek 29 kez görüntülenmiş, 0 yorum ve 0 tepki puanı almıştır...
Kategori Adı Diğer
Konu Başlığı CSS Dersleri - 7
Konuyu başlatan Safak
Başlangıç tarihi
Cevaplar
Görüntüleme
First message reaction score
Son Mesaj Yazan Safak

Safak

Yönetici
Forum Şefi
Moderatör
7 Kas 2019
105
35
28
İstanbul
CSS Margin Kullanımı

CSS Margin Özelliği
CSS margin özelliği elementin dışında boşluk oluşturmak için kullanılır.
margin özelliği ile HTML elementleri arasında boşluk oluşturabilirsiniz.
margin özelliği elementin border (kenar çizgisi) dışında boşluk oluşturur.
CSS ile margin üzerinde tam kontrol sağlarsınız. Dilerseniz tüm kenarların boşluğunu, dilerseniz tek bir kenarın boşluğunu ayarlayabilirsiniz.

CSS Margin Kullanımı

CSS margin özelliği genelde margin:50px şeklinde kullanılır. Bu şekilde kullanımda tüm 4 dış köşeden 50px boşluk bırakılır.
Dilerseniz köşelere ayrı ayrı boşluklar verebilirsiniz:
  • margin-top üst boşluk
  • margin-bottom alt boşluk
  • margin-left sol boşluk
  • margin-right sağ boşluk
Not: Margin değerinde negatif değerler kullanılabilir.
Mesela margin-left:-20px kullanırsanız, element bulunduğu yerden 20px sola kayar.


Örnek

div {
margin-top: 50px;
margin-bottom: 100px;
margin-right: 200px;
margin-left: 50px;
}


CSS Margin Kısa Yazım

Bir elementin 4 tarafının marjin değerlerini tek bir satırda değiştirmek mümkündür.
Normalde elementin 4 tarafının marjin değerleri:
  • margin-top üst marjin
  • margin-bottom alt marjin
  • margin-left sol marjin
  • margin-right sağ marjin
şeklinde ayarlanır. Bunları tek satırda belirtmek mümkündür:margin:10px 30px 50px 40px
Bu şekilde kullanıldığında sırası ile üst, sol, alt ve sağ marjine tek satırda değer atanabilir.

Örnek
p {
margin: 100px 150px 100px 80px;
}

Margin Auto Değeri
Bir elementi yatayda ortalamak isterseniz margin özelliğine auto değerini vermelisiniz.
Bu özelliğin düzgün çalışması için elemente width ile genişlik vermelisiniz. Genişlik verdiğinizde element sağdan ve soldan eşit şekilde boşluk bırakılarak ortalanır.

Örnek

p {
width: 300px;
margin: auto;
border: 1px solid red;
}