CSS Dersleri 7 - Margin, Padding, Width ve Height Kullanımı

Bu dersimiz ile CSS derslerinin sonuna geldik. Bu dersimiz ile margin, padding, height ve width kullanımını işledik. CSS olarak çok temel bir ders olduğunu belirtiyorum. HTML derslerini izleyerek daha iyi anlaşılmaktadır.

CSS Dersleri 7 - Margin, Padding, Width ve Height Kullanımı

CSS Kutu Özellikleri Nasıl Kullanılır 

Box özelliklerini öğrenebilmek için iyice pratik yapmak ve deneyim kazanmak gereklidir.

Kutu modeli dediğimizde şuan sitemizi incelerseniz sağda bir alan ve bu kutu yukarıda başlık kısımları ve logo alanları da birer kutudur. CSS aslında kutular ile çalışmak da diyebiliriz. CSS ile sitemizde ayırdığımız alanlara makyajlar yapmaktayız.

Kutu modeli, kenar boşlukları, dolgu, kenarlıklar ve içerikten oluşur.

  • İçerik: Elemanın içindeki görüntü, ses veya metindir.
  • Padding: İçerik ile kenarlık arasındaki boşluk.
  • Border: dolguyu kenar boşluğundan ayıran kenarlıktır.
  • Margin: Kutu ile diğer kutular arasındaki mesafeyi ayarlamak için boşluk.

Yukarıda bahsettiğim kavramlara ek olarak kutunun yüksekliğini ve uzunluğunu belirleyen genişlik ve yükseklik kavramları da vardır. Bunları da alıştırmalarımızda göstermeye çalışacağım.

Width ve Height
Genişlik ve yükseklik özellikleri ile Lego tuğlamız olan elemanın yüksekliğini ve genişliğini ayarlayabiliyoruz. Bu fonksiyonları yazmazsak tarayıcı ayarlayacak ve yapacağımız web uygulamasında istenmeyen sonuçlara neden olacaktır :) Bu fonksiyonları px, em veya % ile kullanabiliriz. % ile kullandığımızda elementimiz içinde bulunduğu elemente göre ölçeklenir. Başka bir deyişle, 800 piksel boyutundaki bir <div> etiketindeki bir öğenin yüksekliğini %50'ye ayarlarsanız, öğenin yüksekliği 400 piksel olur.

Max-width niteliği ile bir elementin genişlik sınırlarını belirleyebiliriz. Eğer taşarsa kaydırma çubuğu ortaya çıkar.

<style>
   p{
   width: 0;
   height: 0;
   }
<style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Bu kodda genişlik ve yüksekliği 0 olarak ayarladım. Bu paragraf tuhaf görünüyor. Bu alıştırmada yapmanız gereken, paragrafın düzgün görünmesi için istediğiniz genişlik ve yüksekliği kullanmaktır. Burada genişlik ve yüksekliği görmek için hem % hem de px kullanmanızı öneririz.

Margin ve Padding

Margin

Öğenin dışında boşluk oluşturmak için margin niteliğinin kullanıldığını öğrendik. Şimdi nasıl kullanıldığını açıklamaya çalışacağız.

Kenar boşluğu özelliğini 50 piksele ayarladığınızda, öğenin dört tarafında da 50 piksel boşluk oluşturulur. Öğe sağa doğru hareket eder. Negatif değerler de kullanılabilir. Kenar boşluğu değerine -50px yazarsanız, eleman sola hareket edecektir. Dört kenar yerine sadece bir yönde boşluk yaratmak isteyebilirsiniz. Bazı işlevler de vardır.

  • margin-left: Soldan bir boşluk bırakın.
  • margin-top: üstte bir boşluk bırakın.
  • margin-bottom: Aşağıda bir boşluk bırakın.
  • margin-right: Sağdan bir boşluk bırakın.

Ayrıca bu değerleri tek bir satırda yazabiliriz.

margin: 100px 150px 60px 50px;

Bir elementi ortalamak için ise margin: auto değerini vererek yapabiliriz. Bunun için boyutlandırmaları iyi yapmalıyız unutmayalım.

Padding

Şimdi padding fonksiyonuna bakalım. Elemanın içindeki metin ile kenarlık arasındaki mesafeyi padding ile ayarlıyoruz. margin özelliğinde padding:50px ayarını yaptığımızda, içeriğin her iki tarafında 50px boşluk bırakıyoruz. dolguyu belirli bir tarafta bırakın;

  • padding-top: İçeriğin üzerindeki boşluk.
  • padding-bottom: İçeriğin altına bir boşluk ekleyin.
  • padding-left: İçeriğin solunda bir boşluk bırakın.
  • padding-right: İçeriğin sağında bir boşluk bırakın.

Tek tek tanımlamak yerine tek satırda belirtilebilirler.

padding: 10px 20px 30px 40px;
/* Burada üst boşluk 10px,sağ boşluk 20px,alt boşluk 30px ve sol boşluk 40px dir.*/
padding: 10px 20px 30px;
/* Üst boşluk 10px,sağ ve sol boşluk 20px,alt boşluk 30px dir. */
padding: 10px 20px;
/* üst ve alt boşluk 10px,sağ ve sol boşluk 20px */