Dış Boşluk - İç Boşluk - Gap

border

Kullanım#

Gap değerleri ile ara boşlukları kolaylıkla sağlayabilirsiniz.

Class için [özellik][nitelik]-[boşluk] veya [özellik][nitelik]-[Kırılma noktası]-[boşluk] kullanarak uygulayabilirsiniz.

v5 iskelet düzeninde sizler için önceden tanımlanmış classları kullanarak hızlı yol kat edebilirsiniz.

Özellik#

m - Dış boşluk için (margin)
p - İç boşluk için (padding)

Nitelik#

t	- Üst dış boşluk `(margin-top)` veya iç boşluk `(padding-top)`
b	- Alt dış boşluk `(margin-bottom)` veya iç boşluk `(padding-bottom)`
x	- Sol ve Sağ dış boşluk`(margin-left & margin-right)` veya iç boşluk `(padding-left & padding-right)` (X Ekseni)
y	- Üst ve Alt dış boşluk `(margin-top & margin-bottom)` veya iç boşluk `(padding-top & padding-bottom)` (Y Ekseni)

Boşluk (Dış veya İç)#

0 - Değerini sıfırlar.
1 - 15px - Genişlik < md = 8px
2 - 30px - Genişlik < md = 16px
3 - 45px - Genişlik < md = 24px
4 - 60px - Genişlik < md = 32px

Kırılma noktası#

sm, md, lg, xl, ve xxl.

Detaylı bilgi için Izgara Sistemi makalemize göz atabilirsiniz.

Dış Boşluk (margin)#

Margin özelliği, elementin dört kenarına dıştan boşluk vermeye yarar. Negatif değer alabilir. Ayrıca kenar payları her kenar için ayrı ayrı margin-bottom, margin-top,margin-left ve margin-rightözellikleri belirtildiği gibi tek bir özellikle (margin) de tanımlama yapılabilir.

.ml-3

.mb-2

.mt-2

.ml-1.mt-2

.mx-4.my-2

<div class="ml-3">.ml-3</div>
<div class="ml-1">.ml-1</div>
<div class="ml-2 mt-3">.ml-2.mt-3</div>

İç Boşluk (padding)#

Elementin içeriği ile kenarlığı arasındaki dolgu genişliğini belirler. CSS padding özelliği, bir elemanın her tarafta gerekli dolgu alanı ayarlar. Dolgu alanı, eleman ve sınır içeriği arasındaki boşluktur. Negatif değerlere izin verilmez.

.p-4

.pl-3

.pr-2

.pb-4.pt.2

.pb-3.pt.2.py-1

GAP Değerleri#

0 - Değerini sıfırlar.
1 - 15px - Genişlik < md = 8px
2 - 30px - Genişlik < md = 16px
3 - 45px - Genişlik < md = 24px
4 - 60px - Genişlik < md = 32px
5 - 75px - Genişlik < md = 40px

Örnek Kullanımlar#

<div class="d-flex gap-[değer]">content</div>

.gap-1

.gap-2

.gap-3

.gap-4

.gap-5