Css Dersleri Bölüm 18 Element yayılımı(Floating)
Ne Fark Eder ki! Dergisinin hazırlamış olduğu Css Derslerinin 18. bölümü, element yayılımı, Floating konusu...
right Tag
- All
- Dijital pazarlama
- Dijital, İyi Şeyler Podcast
- E-Ticaret
- Eğitim
- Growth hacking
- İnceleme
- Kişisel
- Rehber
- Reklam
- Sosyoloji
- Teknoloji
- Wordpress
CSS Dersleri Bölüm 13 Padding
Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz!
Padding
Element ve elementin içeriği arasındaki boşlukları ifade eder padding.
Padding
Bir elementin içeriğinin etrafının temizlenmesini sağlar. Elementin arkaplan renginden etkilenir.
Farklı özellikler kullanarak, alt, üst, sağ sol farklı olarak ayarlanabilir. Tüm özelliklerin yazımı yerine kısayazım özelliği ile de belirlenebilir tüm çevre.
Mümkün olan değerler
| Değer | Tanım |
|---|---|
| length | Sabit bir iç boşluk (in pixels, pt, em, etc.) |
| % | Elementin yüzdesel boşlukları |
Padding – Tekil kenarlar
CSS’te, farklı kenarlara farklı iç boşluklar verilebilir:
Örneğin
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding – Kısayazım özelliği
Kodu kısaltmak için,tek bir özellikte tüm değerler verilebilir. Bu kısayazım özelliğidir.
“padding” İç bşoluklar için kısayazım özelliği taşıyan özelliktir:
Padding özelliği birden dörde kadar değer alabilir.
- padding:25px 50px 75px 100px;
- üst boşluk 25px
- sağ boşluk 50px
- alt boşluk 75px
- sol boşluk 100px
- padding:25px 50px 75px;
- üst boşluk 25px
- sağ ve sol boşluk 50px
- alt boşluk 75px
- padding:25px 50px;
- üst ve alt boşluk 25px
- sağ ve sol boşluk 50px
- padding:25px;
- tüm boşluklar 25px
CSS Dersleri Bölüm 12 – Margin
Uzunca bir boşluktan sonra tekrar yazabildim. Ve şimdi konumuzu anlatayım.
Element çevresindeki boşluklar margin’i tanımlar. Css’te margin olarak kullanabiliriz tabi.
Bir elementin dış çevre boşluğunu ifade eder marjin. (kenarların dışında kalan yerler). Bu bölgenin hiçbir rengi yoktur ve tamamen saydamdır.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Kullanılabilen değerler
| Değer | Tanım |
|---|---|
| auto | Tarayıcı dış boşlukları ayarlar. Tarayıcıya bağlı bir sonuç oluşur burada. |
| length | Sabit bir boşluk yani marjin oluşur bu durumda (pixel(px) ile, punto(pt) ile veya em ile belirlenir.) |
| % | Elementin yüzdelik değerini içeren bir boşluk belirtir. |
İçeriye alabilmek için eksi yönde değerler de kullanabilmeniz mümkün.
Margin – Tekil kenarlar
CSS’te, farklı kenarlara farklı boşluk ölçüleri verilmesi mümkündür:
Örnek
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin – Kısayazım özelliği
Kodun kısa yazımı, tüm margin özelliklerinin tek bir margin tanımında yazılabilmesiyle olur. Bu kısayazım özelliğidir.