Margin (Dış boşluk) ve Padding (İç boşluk)
p ve m sınıf ile bir elemana, kenarlara veya bir ekran boyutuna kenar boşluğu veya dolgu değerleri atanabilir.
m ve p sınıfları, xs (576px'den küçük) için {özellik}{kenar}-{boyut} ve sm, md, lg ve xl için {özellik}{kenar}-{ekranboyuttu}-{boyut} biçiminde kullanılarak adlandırılır.
Margin (dış boşluk) ve Padding (iç boşluk) Sözdizimi:
- {özellik}{kenar}-{boyut} xs (576px'den küçük) ekranlar için
- {özellik}{kenar}-{ekranboyutu}-{boyut} sm, md, lg, ve xl ekranlar için
{özellik} :
- m - margin ayarlamak için
- p - padding ayarlamak için
{kenar}
- t - margin-top ve padding-top yerine
- b - margin-bottom ve padding-bottom yerine
- l - margin-left ve padding-left yerine
- r - margin-right ve padding-right yerine
- x - {margin | padding}-left ve {margin | padding}-right her ikisi yerine
- y - {margin | padding}-top ve {margin | padding}-bottom her ikisi yerine
- yazılmazsa - 4 kenara ayarlanır
{ekranboyutu}
- sm
- md
- lg
- xl
{boyut}
- 0 - margin veya padding değeri 0 yapılır
- 1 - margin veya padding değeri * .25 rem
- 2 - margin veya padding değeri * .5 rem
- 3 - margin veya padding değeri 1 rem
- 4 - margin veya padding değeri * 1.5 rem
- 5 - margin veya padding değeri * 3 rem
- auto - margin değeri auto yapılır
Örnekler:
class="mt-0" ->margin-top:0;
class="mt-1" -> margin-top:.25rem;
class="px-2" -> padding-left:.5rem; padding-right:.5rem;
class="p-3" -> padding: 1rem;
class="m-lg-4" -> lg ekranlarda margin: 1.5rem;
class="p-md-3" -> md ekranlarda padding: 1rem;
Yatay hizalama:
class="mx-auto" -> Yatay ORTALA
Negatif margin (dış boşluk):
margin (dış boşluk) özellikleri negatif değerler alabilir (padding (iç boşluk) almaz).
class="mt-n4" -> margin-top: -1.5rem;