BOOTSTRAP 4 MARGİN VE PADDİNG

HTML ve CSS düzeninde bir elemanın kenarlığı ile dışındaki nesneler arasındaki mesafeye margin(dış boşluk) adı verilir.
Aynı şekilde bir nesnenin kenarlığı ile içinde bulunan içerik arasındaki boşluğa ise padding(iç boşluk) denir.

Bootstrap 4’te margin ve padding için de hazır bazı özellikler bulunmaktadır.

Margin => m
padding => p

top (üst) = > t
bottom (alt) = > b
right (sağ) = > r
left (sol) = > l
x boyutu (sağ – sol) = > x
y boyutu (üst – alt) = > y
Her tarafa aynı büyüklük verilecek ise boş bırakılır.

0 ile 5 arasında büyüklük verilebilir, ayrıca auto da otomatik özellik vermek için kullanılır

Örneğin;

<div class=”mt-3″>Bu div’e üstten 3 birim margin verilmiştir.</div>

<div class=”p-2″>Bu div’e her yönden 2 birim padding verilmiştir.</div>

<div class=”my-2 px-1″>Bu div’e üstten ve alttan 2 birim margin ve soldan sağdan 1 birim padding verilmiştir.</div>

Not: Eğer p ya da m nin yanına herhangi bir harfa gelmezse her 4 tarafa da aynı büyüklük verilecek demektir.