Bootstrap 4 Margin ve Padding

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.

Her ne kadar margin ve padding çok işe yarar görünmese de sayfadaki elemanların yerleşimi açısından hayati önem taşımaktadır, ayrıca nesnelerin arasındaki boşluklar da margin ve padding ile belirlenir.
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.


Yorumlar


Bootstrap 4 için önemli ve gerekli bir konu, kısaltmalar anlaşılır bir şekilde aktarılmış teşekkürler.

Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com