Harun İstenci
Harun İSTENCİ
Kurucu ve Yönetici
 1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...

Kişisel Web Sitesi: harunistenci.com

Öne Çıkan Şehirler

İstanbul
Sivas
Safranbolu
Kastamonu
Eskişehir
Edirne
Denizli
A320 Ailesi Aero Spacelines Afyonkarahisar Airbus Aliya İzzetbegoviç Almanya Amasya Ankara Antik Kent Antonov Araç Arkadaşlar Arkeoloji Avrupa AWACS Aydın Aydın Çufaoğlu Ayvalık Azdavay Baden-Württemberg BAE Systems Balıkesir Basın Açıklaması Bedesten Bergama Beşiktaş Beyoğlu Bilecik Blog Boeing Bolu Bombardier Bosna Hersek Breguet Bursa Cami Cide Concorde CSS Eğitimleri Çarşı Çevre Denizli Developer Doğa Douglas Aircraft Company EADS Edirne Efes Eğitim Eğlence Eminönü Erasmus Erzincan Eskişehir Fatih Fokker Fransa Galeri Gar Gebze Göl Göynük Guppy Gürün Haber Hamam Han Harun İstenci Havacılık Hayvanlar Heidelberg Heykel Ilgaz Ilyushin İğdir İnsanlar İnternet İsmail Ulukaya İstanbul İşletim Sistemleri İzmir İzmit Jumbo Jet Kadıköy Kale Kanyon Karaağaç Karabük Karşılaştırma Kartepe Kastamonu Kemaliye Keşfet Kilise Kocaeli Konak Konya Köprü Külliye Küre Linus Torvalds Linux Lockheed Lockheed Martin Ludwigshafen Maltepe Mannheim Marmaris McDonnell Douglas Medrese Merak Edilenler Microsoft Moda Motivasyon Muğla Muhammet Ali Sağlar Müze Nedir Ortaköy Osmangazi Paris Safranbolu Sakarya Sapanca Sivas Sivrihisar Siyaset Sorun Çözümü Strasbourg Stratolaunch Suhoy Sukhoi Süpersonik Şelale Şile Tarih Tarihe Yön Verenler Taşköprü Trakya Tupolev Türbe Ubuntu Uçaklar United Aircraft Coorparation Üsküdar Vickers Vickers-Armstrongs Limited Video Wilfrid Voynich Windows Windows10 Windows7 Yazılım Yelken Yerler Yollar Yurt dışı

CSS - Margin ve Padding Kullanımı
 Bu CSS eğitim yayınımızda sizlere margin ve padding komutları ne işe yarar ve bu komutlar ile neler yapılabilir, CSS standartlarında bunları anlatmaya çalışacağız...
CSS - Margin ve Padding Kullanımı
Görsel 1
 Bir HTML nesnesi kutu gibi davranabilir. İşte bu kutu şekilli tasarım modeline CSS Kutu Modeli diyoruz ve yukarıda şeklini çizerek sizlere anlatmaya çalıştım.
Kutu modelinde size tanıtacağımız dört özellik var:
  • Margin - Kenarlığın çevresinde verilen boşluk.
  • Border - Kenarlık
  • Padding - Kenarlık ile içerik arasındaki boşluk. Arkaplan rengine boyanır.
  • Content (İçerik) - Yani yukarıdaki Görsel 1'de paragraf kısmı içerik oluyor.
 Yukarıda CONTENT içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz boşluk padding, kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.

 Benim sözlüğümde bu komutlar bir nesneye kenarlık tanımlamada etkin rol oynuyor. Örneğin bir resme veya tabloya verilebilecek değerler ile görülebilir veya görülemeyen çerçeveler tanımlayabilirsiniz.

CSS Dıştan Boşluk, margin Kullanımı

 Margin dediğimiz komut "dış kenar boşluğudur". Mesela yukarıdaki Görsel 1'de anlatmaya çalıştım, orada margin ve padding komutlarını inceleyebilirsiniz. Aşağıda ise CSS kod örneği verdim. Bu bir resim, fotoğraf, tablo vs’de olabilir. Görsel 1'de örnek paragrafın dış kenar boşluğunu margin iç kenar boşluğunu ise Padding‘i oluşturur.

 margin özelliği bir HTML elementinin çevresi ile ona komşu başka bir HTML elementi arasında belirtilen miktarda genişletip boşluk yaratır. Bu boşluk kenarlığın dışında olacağı için dış kenarlık diyoruz.

 Dış kenarlığı belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir CSS komuduyla da bunlar hızlıca belirlenebilir.

Tüm margin komutları:
  • margin - Hızlı kullanım
  • margin-top - Üstten boşluk
  • margin-right - Sağdan boşluk
  • margin-bottom - Alttan boşluk
  • margin-left - Soldan boşluk
Alabileceği değerler:
  • auto - Kenarlıklar tarayıcı tarafından otomatik ayarlanır
  • px - piksel olarak boşluk belirtme
  • % - İçerik genişliğine göre oranlar

Her biri ayrı şekilde dış boşlukları ayarlamak:

 Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için margin komutuna araya tire (-) koyarak ilgili yönün İngilizce'sini yazıyoruz.
[code type="CSS"].resim { margin-top: 10px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; }[/code]
 Yukarıdaki örnek kodda .resim sınıfında tanımladığım HTML elementinin üst ve alt boşluklar 10 piksel yüksekliğinde, sağ ve sol boşluklar 5 piksel genişliğinde olacaktır.

Dış boşlukları ayarlamanın başka bir kısa yolu:

 Sadece margin kullanarak hepsi için geçerli tek bir tane değer yaza bildiğimiz gibi saat yönünde sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:
[code type="CSS"] .resim { /* Açıklama: margin: [üst] [sağ] [alt] [sol] */ margin: 10px 5px 10px 5px; }[/code]
 Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:
[code type="CSS"] .resim { /* Açıklama: margin: [üst|alt] [sağ|sol] */ margin: 10px 5px; }[/code]
 Yazdığımız bu kod, bir önceki yazdığımız kod ile aynı işlevi görecektir.

CSS içten boşluk, padding Kullanımı

 Padding ise "iç kenar boşluğu" olarak tanımlanabilir. Mesela yukarıdaki Görsel 1'de anlatmaya çalıştım, orada margin ve padding komutlarını inceleyebilirsiniz. Aşağıda ise CSS kod örneği verdim. Bu bir resim, fotoğraf, tablo vs’de olabilir. Görsel 1'de örnek paragrafın dış kenar boşluğunu margin iç kenar boşluğunu ise padding'i oluşturur.
Tüm padding komutları:
  • padding - Hızlı kullanım
  • padding-top - Üstten boşluk
  • padding-right - Sağdan boşluk
  • padding-bottom - Alttan boşluk
  • padding-left - Soldan boşluk
Alabileceği değerler:
  • genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
  • yüzde kullanma (%) - İçerik genişliğine göre oranlar

Her biri ayrı şekilde iç boşlukları ayarlamak

 Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün İngilizce'sini yazıyoruz.
[code type="CSS"].stil2 { padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; }[/code]
 Yukarıdaki örnekte üst ve alt boşluklar içeriden 10 piksel yüksekliğinde, sağ ve sol boşluklar içeriden 5 piksel genişliğinde olacaktır.

İç boşlukları ayarlamanın başka bir kısa yolu

 Sadece padding kullanarak hepsi için geçerli tek bir tane değer yaza bildiğimiz gibi saat yönünde sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:
[code type="CSS"].stil2 { /* Açıklama: padding: [üst] [sağ] [alt] [sol] */ padding: 10px 5px 10px 5px; }[/code]
 Yukarı ve alt değeri ile sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:
[code type="CSS"].stil2 { /* Açıklama: padding: [üst|alt] [sağ|sol] */ padding: 10px 5px; }[/code]

Meraklısı için Görsel 1'in CSS ve HTML Kodları:

[code type="CSS"] .kutu1 { width:500px; height: 150px; padding: 30px 30px 30px 30px; background-color:#9DC3E6; } .kutu2 { width:475px; height:125px; border:3px solid #000; padding: 10px 10px 10px 10px; background-color:#A9D18E; text-align: left; } .kutu3 { width:425px; height: 50px; margin: 20px 50px 10px 30px; padding: 20px 1px 10px 10px; background-color:#FCE5D6; font-size: 14px; }[/code] [code type="HTML"] <div class="kutu1"> <div class="kutu2"> <div class="kutu3"> istenci.com üzerinde yayınlanan örnek bir paragrafı okumaktasınız. </div> </div> </div>[/code]
Bir sonraki anlatılması gereken makale: Border (Kenarlık) Kullanımı
Bu içerik Harun İstenci tarafından aşağıda belirtilmiş olan kategoriler altında oluşturulmuş ve yayınlanmıştır. İçeriğin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu'na göre suçtur. | İstenci Systems
Yazar Bilgisi: Harun İstenci Hakkında
Harun İstenci Hakkında
1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...
Harun İstenci Resmi Web Sitesi Hakkında Daha Fazla >

Bu CSS eğitim yayınımızda sizlere margin ve padding komutları ne işe yarar ve bu komutlar ile neler yapılabilir, CSS standartlarında bunları anlatmaya çalışacağız...

Yorum Gönderme

Yorum alanı herkese açıktır. Olağan dışı bir yorum algılandığında topluluk politikalarımız gereğince 24 saat içinde kaldırılacaktır.

[blogger][disqus]

Author Name

İletişim Formu

Ad

E-posta *

Mesaj *

Blogger tarafından desteklenmektedir.