CSS Padding Kullanımı

Web tasarım derslerimizin CSS bölümüne devam ediyoruz. Herkese iyi dersler.

CSS’te Padding (Dolgu) Özelliği

Bu HTML öğesinin 70px’lik padding’i var

CSS’te padding özelliğini içeriğin etrafında, kenarlığın içinde boşluk oluşturmak için kullanırız.

CSS ile padding üzerinde tam kontrol sahibi oluruz. Bir HTML öğesinin her tarafına (üst, sağ, alt, sol) ayrı padding verebiliriz.

Padding – Bireysel Kenarlar

CSS’te bir HTML öğesinin her bir yanına padding verilebilir:

padding-top
padding-right
padding-bottom
padding-left

Padding özellikleri aşağıdaki değerlerle belirlenir:

uzunluk – px, pt, cm vb. bir boşluk belirtir
% – boşluğu kapsayan öğenin genişliğine göre yüzde cinsinden verir
inherit – padding’in bir üst öğeden devralınmasını sağlar

Aşağıdaki örnek, bir HTML öğesinin dört bir yanına farklı padding değerleri vermeyi gösterir.

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Padding – Kod Kısaltmak

Web tasarımlarımızda bazen her bir kenarı satır satır yazmakla uğraşmak istemeyebiliriz.
Bu durumda kodlarımızı tek satırda kısaltarak yazarız (sıra: üst, sağ, alt, sol).

p {
    padding: 50px 30px 50px 80px;
}

CSS’te Width ve Height (Genişlik ve Yükseklik)

Bu öğenin genişliği 500px olarak verilmiştir.

Yükseklik ve genişlik ayarlama

height ve width bir öğenin yüksekliğini ve genişliğini ayarlamak için kullanılır.

height – Öğenin yüksekliğini ayarlar
width – Öğenin genişliğini ayarlar

width ve height değerleri px, cm ya da % cinsinden verilebilir.

Bu öğe 200px yüksekliğinde ve %50 genişliğe sahiptir.

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

Bu öğenin yüksekliği 100 piksel ve genişliği 500 pikseldir.

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

height ve width özellikleri bir öğenin padding, kenarlık ya da kenar boşluklarını kapsamaz; yalnızca içerik alanının yüksekliğini ve genişliğini belirler.

Maksimum genişliği ayarlama

max-width özelliği bir HTML öğesinin en fazla ne kadar genişlikte olacağını belirlemek için kullanılır.

max-width değeri uzunluk (px, cm) ya da yüzde (%) cinsinden verilebilir.

max-width verdiğiniz div’in farkını görmek için tarayıcı pencerenizi küçültmeyi deneyin.

Not: max-width, width değerinden küçük olduğunda öğenin genişliği max-width ile sınırlanır.

Aşağıdaki örnekte gösterilen div’e 100px yükseklik ve en fazla 500px genişlik verilmiştir.

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

CSS derslerimizin bu bölümünü bitirmiş bulunuyoruz.
Bir sonraki derste görüşmek üzere.