Doğuhan ELMA tarafından Spacing yayınlanma tarihi
74 görünüm
CSS'de padding ve margin, bir web sayfasının düzenini kontrol eden önemli özelliklerdir. Bu iki özellik, öğeler arasındaki boşlukları ayarlayarak sayfanın görsel yapısını ve okunabilirliğini iyileştirir. Hem padding hem de margin özellikleri, tüm dört kenar için tek bir değer belirleyebileceğiniz gibi, her bir kenar için ayrı ayrı değerler de belirleyebilirsiniz.
Padding
padding, bir öğenin içeriği ile sınırı (border) arasındaki boşluğu belirtir. Başka bir deyişle, öğenin iç kenar boşluğudur. padding değeri arttıkça, içerik ile öğenin çevresindeki sınır arasındaki boşluk artar. Bu, içerik ve öğenin sınırı arasında daha fazla alan yaratır.
CSS'de padding özelliğini dört farklı şekilde belirleyebilirsiniz:
Tek bir değer ile (örn., padding: 10px;), bu durumda tüm dört kenara aynı padding uygulanır.
Dört değer ile (örn., padding: 10px 15px 20px 25px;), bu durumda üst, sağ, alt ve sol kenarlara sırasıyla bu değerler uygulanır.
Üç değer ile (örn., padding: 10px 15px 20px;), bu durumda üst kenara ilk değer, yatay kenarlara ikinci değer ve alt kenara üçüncü değer uygulanır.
İki değer ile (örn., padding: 10px 20px;), bu durumda ilk değer dikey (üst ve alt) kenarlara, ikinci değer ise yatay (sağ ve sol) kenarlara uygulanır.
Margin
margin, bir öğenin dış kenar boşluğudur ve öğe ile çevresindeki diğer öğeler arasındaki boşluğu belirler. margin değeri arttıkça, öğe ile çevresindeki öğeler arasındaki mesafe artar. Bu, öğeler arasında daha fazla boşluk yaratır ve sayfa üzerindeki öğelerin birbirinden ayrılmasını sağlar.
CSS'de margin özelliği de padding gibi dört farklı şekilde belirlenebilir:
Tek bir değer ile (örn., margin: 10px;), bu durumda tüm dört kenara aynı margin uygulanır.
Dört değer ile (örn., margin: 10px 15px 20px 25px;), bu durumda üst, sağ, alt ve sol kenarlara sırasıyla bu değerler uygulanır.
Üç değer ile (örn., margin: 10px 15px 20px;), bu durumda üst kenara ilk değer, yatay kenarlara ikinci değer ve alt kenara üçüncü değer uygulanır.
İki değer ile (örn., margin: 10px 20px;), bu durumda ilk değer dikey (üst ve alt) kenarlara, ikinci değer ise yatay (sağ ve sol) kenarlara uygulanır.
padding ve margin, web tasarımında öğelerin yerleşimini ve sayfanın genel düzenini etkileyen temel araçlardır. Bu özellikler sayesinde, tasarımcılar sayfa üzerinde öğeler arasında uygun boşluklar yaratarak daha temiz ve okunabilir bir düzen oluşturabilirler.
TailwindCSS:
Margin
|
Class
|
Properties
|
|---|---|
| m-0 | margin: 0px; |
| mx-0 | margin-left: 0px; margin-right: 0px; |
| my-0 | margin-top: 0px; margin-bottom: 0px; |
| ms-0 | margin-inline-start: 0px; |
| me-0 | margin-inline-end: 0px; |
| mt-0 | margin-top: 0px; |
| mr-0 | margin-right: 0px; |
| mb-0 | margin-bottom: 0px; |
| ml-0 | margin-left: 0px; |
burda bulunan 0 değeri rem olcusunde değerler alır.
Padding:
|
Class
|
Properties
|
|---|---|
| p-0 | padding: 0px; |
| px-0 | padding-left: 0px; padding-right: 0px; |
| py-0 | padding-top: 0px; padding-bottom: 0px; |
| ps-0 | padding-inline-start: 0px; |
| pe-0 | padding-inline-end: 0px; |
| pt-0 | padding-top: 0px; |
| pr-0 | padding-right: 0px; |
| pb-0 | padding-bottom: 0px; |
| pl-0 | padding-left: 0px; |
Space Between:
Tailwind CSS'de, space-between genellikle flexbox veya grid konteynerlerindeki öğeler arasındaki boşluğu dağıtmak için kullanılan bir terimdir.
|
Class
|
Properties
|
|---|---|
| space-x-0 > * + * | margin-left: 0px; |
| space-y-0 > * + * | margin-top: 0px; |
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.