CSS Dersleri

CSS Kutu Modeli - Padding Özellikleri

Fatih Hayrioğlu

Fatih Hayrioğlu

— 2 min read

Padding içerik alanı ile kenarlık arasındaki alandır.

Kutu Modeli

padding-top

Yapısı : padding-top: (değer) Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit\ Başlnagıç değeri: 0\ Uygulanabilen elementler: tüm elementler\ Kalıtsallık: Yok {: .cssozelliktanimi}

padding-top özelliği içerik alanı ile üst kenarlık arasındakimesafeyi belirler.

h2 {
	padding-left: 0.25in;
}

**Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer Mobil TarayıcılariOS Safari Opera Mobile Android Browser {: .tarayiciuyum}

padding-right

Yapısı : padding-right: (değer) Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit\ Başlangıç değeri: 0\ Uygulanabilen elementler: tüm elementler\ Kalıtsallık: Yok {: .cssozelliktanimi}

padding-right özelliği içerik alanı ile sağ kenarlık arasındakimesafeyi belirler.

h2 {
	padding-right: 0.25in;
}

**Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer Mobil TarayıcılariOS Safari Opera Mobile Android Browser {: .tarayiciuyum}

padding-bottom

Yapısı : padding-bottom: (değer) Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit\ Başlnagıç değeri: 0\ Uygulanabilen elementler: tüm elementler\ Kalıtsallık: Yok {: .cssozelliktanimi}

padding-bottom özelliği içerik alanı ile alt kenarlık arasındakimesafeyi belirler.

h2 {
	padding-bottom: 0.25in;
}

**Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer Mobil TarayıcılariOS Safari Opera Mobile Android Browser {: .tarayiciuyum}

padding-left

Yapısı : padding-left: (değer) Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit\ Başlnagıç değeri: 0\ Uygulanabilen elementler: tüm elementler\ Kalıtsallık: Yok {: .cssozelliktanimi}

padding-left özelliği içerik alanı ile sol kenarlık arasındakimesafeyi belirler.

h2 {
	padding-left: 0.25in;
}

**Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer Mobil TarayıcılariOS Safari Opera Mobile Android Browser {: .tarayiciuyum}

padding

Yapısı : padding: (değer) Aldığı Değerler : <uzunluk değeri > | <yüzde>{1,4} | inherit\ Başlnagıç değeri: 0\ Uygulanabilen elementler: Block-level ve replaced elementler\ Kalıtsallık: Yok {: .cssozelliktanimi}

paddingözelliği padding-top, padding-right, padding-bottomve padding-left değerlerini kısayoldan atamak için kullanılır.

h1 {
	padding: 10px;
	background-color: silver;
}

margin'deki gibi farklı kullanım şekilleri mevcuttur.

**Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer Mobil TarayıcılariOS Safari Opera Mobile Android Browser {: .tarayiciuyum}

Read more

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu