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 gap özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

54 views

CSS'de gap özelliği, Flexbox veya Grid konteynerlerinde öğeler arasındaki boşluğu ayarlamak için kullanılır. Bu özellik, hem yatay (sütunlar arası) hem de dikey (satırlar arası) boşlukları belirlemek için tek bir değer olarak kullanılabilir. gap özelliği, daha önce grid-gap, grid-row-gap, ve grid-column-gap olarak bilinen özelliklerin yerini almıştır ve Flexbox düzeninde de kullanılabilir hale gelmiştir. Bu sayede, içerik öğeleri arasında tutarlı bir boşluk sağlamak ve düzenin görsel açıdan daha çekici hale gelmesini kolaylaştırmak mümkün olur.

 

TailwindCSS:

Class
Properties
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-px gap: 1px;
gap-x-px column-gap: 1px;
gap-y-px row-gap: 1px;
gap-0.5 gap: 0.125rem; /* 2px */
gap-x-0.5 column-gap: 0.125rem; /* 2px */
gap-y-0.5 row-gap: 0.125rem; /* 2px */
gap-1 gap: 0.25rem; /* 4px */
gap-x-1 column-gap: 0.25rem; /* 4px */
gap-y-1 row-gap: 0.25rem; /* 4px */
gap-1.5 gap: 0.375rem; /* 6px */
gap-x-1.5 column-gap: 0.375rem; /* 6px */
gap-y-1.5 row-gap: 0.375rem; /* 6px */
gap-2 gap: 0.5rem; /* 8px */
gap-x-2 column-gap: 0.5rem; /* 8px */
gap-y-2 row-gap: 0.5rem; /* 8px */
gap-2.5 gap: 0.625rem; /* 10px */
gap-x-2.5 column-gap: 0.625rem; /* 10px */
gap-y-2.5 row-gap: 0.625rem; /* 10px */
gap-3 gap: 0.75rem; /* 12px */
gap-x-3 column-gap: 0.75rem; /* 12px */
gap-y-3 row-gap: 0.75rem; /* 12px */
gap-3.5 gap: 0.875rem; /* 14px */
gap-x-3.5 column-gap: 0.875rem; /* 14px */
gap-y-3.5 row-gap: 0.875rem; /* 14px */
gap-4 gap: 1rem; /* 16px */
gap-x-4 column-gap: 1rem; /* 16px */
gap-y-4 row-gap: 1rem; /* 16px */
gap-5 gap: 1.25rem; /* 20px */
gap-x-5 column-gap: 1.25rem; /* 20px */
gap-y-5 row-gap: 1.25rem; /* 20px */
gap-6 gap: 1.5rem; /* 24px */
gap-x-6 column-gap: 1.5rem; /* 24px */
gap-y-6 row-gap: 1.5rem; /* 24px */
gap-7 gap: 1.75rem; /* 28px */
gap-x-7 column-gap: 1.75rem; /* 28px */
gap-y-7 row-gap: 1.75rem; /* 28px */
gap-8 gap: 2rem; /* 32px */
gap-x-8 column-gap: 2rem; /* 32px */
gap-y-8 row-gap: 2rem; /* 32px */
gap-9 gap: 2.25rem; /* 36px */
gap-x-9 column-gap: 2.25rem; /* 36px */
gap-y-9 row-gap: 2.25rem; /* 36px */
gap-10 gap: 2.5rem; /* 40px */
gap-x-10 column-gap: 2.5rem; /* 40px */
gap-y-10 row-gap: 2.5rem; /* 40px */
gap-11 gap: 2.75rem; /* 44px */
gap-x-11 column-gap: 2.75rem; /* 44px */
gap-y-11 row-gap: 2.75rem; /* 44px */
gap-12 gap: 3rem; /* 48px */
gap-x-12 column-gap: 3rem; /* 48px */
gap-y-12 row-gap: 3rem; /* 48px */
gap-14 gap: 3.5rem; /* 56px */
gap-x-14 column-gap: 3.5rem; /* 56px */
gap-y-14 row-gap: 3.5rem; /* 56px */
gap-16 gap: 4rem; /* 64px */
gap-x-16 column-gap: 4rem; /* 64px */
gap-y-16 row-gap: 4rem; /* 64px */
gap-20 gap: 5rem; /* 80px */
gap-x-20 column-gap: 5rem; /* 80px */
gap-y-20 row-gap: 5rem; /* 80px */
gap-24 gap: 6rem; /* 96px */
gap-x-24 column-gap: 6rem; /* 96px */
gap-y-24 row-gap: 6rem; /* 96px */
gap-28 gap: 7rem; /* 112px */
gap-x-28 column-gap: 7rem; /* 112px */
gap-y-28 row-gap: 7rem; /* 112px */
gap-32 gap: 8rem; /* 128px */
gap-x-32 column-gap: 8rem; /* 128px */
gap-y-32 row-gap: 8rem; /* 128px */
gap-36 gap: 9rem; /* 144px */
gap-x-36 column-gap: 9rem; /* 144px */
gap-y-36 row-gap: 9rem; /* 144px */
gap-40 gap: 10rem; /* 160px */
gap-x-40 column-gap: 10rem; /* 160px */
gap-y-40 row-gap: 10rem; /* 160px */
gap-44 gap: 11rem; /* 176px */
gap-x-44 column-gap: 11rem; /* 176px */
gap-y-44 row-gap: 11rem; /* 176px */
gap-48 gap: 12rem; /* 192px */
gap-x-48 column-gap: 12rem; /* 192px */
gap-y-48 row-gap: 12rem; /* 192px */
gap-52 gap: 13rem; /* 208px */
gap-x-52 column-gap: 13rem; /* 208px */
gap-y-52 row-gap: 13rem; /* 208px */
gap-56 gap: 14rem; /* 224px */
gap-x-56 column-gap: 14rem; /* 224px */
gap-y-56 row-gap: 14rem; /* 224px */
gap-60 gap: 15rem; /* 240px */
gap-x-60 column-gap: 15rem; /* 240px */
gap-y-60 row-gap: 15rem; /* 240px */
gap-64 gap: 16rem; /* 256px */
gap-x-64 column-gap: 16rem; /* 256px */
gap-y-64 row-gap: 16rem; /* 256px */
gap-72 gap: 18rem; /* 288px */
gap-x-72 column-gap: 18rem; /* 288px */
gap-y-72 row-gap: 18rem; /* 288px */
gap-80 gap: 20rem; /* 320px */
gap-x-80 column-gap: 20rem; /* 320px */
gap-y-80 row-gap: 20rem; /* 320px */
gap-96 gap: 24rem; /* 384px */
gap-x-96 column-gap: 24rem; /* 384px */
gap-y-96 row-gap: 24rem; /* 384px */

 

1.png

 

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...