Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de padding ve margin - TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

36 views

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.

1.png

1.png

1.png

 

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;

 

1.png

 

 

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 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...