Merhaba dostlar bu gün Margin ve Padding olayına bakacağız vakit kaybetmeden başlıyalım
dostlar bütün anlatıcaklarım bitince bütün kodları dosya dosya şeklinde vereceğim
ilk olarak margin in kelime anlamına bakalım
Margin ingilizcede Kenar Boşluğu demektir
Gelin bide padding in kelime anlamına bakalım
Padding ingilizcede Dolgu Malzemesi demektir
peki şimdi gelin Margin ile başlıyalım Margini m harfi ile ile kullana biliriz peki nasıl
m-0 gibi bu değer 5 e kadar gitmekte yani m-0 m-1 m-2 m-3 m-4 m-5
peki gelin biraz örnek yapalım daha kalıcı olsun
ilk olarak style tag ı içinde div e hem width hemde height vericeğim ikiside 200px olacak
dostlar bütün anlatıcaklarım bitince bütün kodları dosya dosya şeklinde vereceğim
ilk olarak margin in kelime anlamına bakalım
Margin ingilizcede Kenar Boşluğu demektir
Gelin bide padding in kelime anlamına bakalım
Padding ingilizcede Dolgu Malzemesi demektir
peki şimdi gelin Margin ile başlıyalım Margini m harfi ile ile kullana biliriz peki nasıl
m-0 gibi bu değer 5 e kadar gitmekte yani m-0 m-1 m-2 m-3 m-4 m-5
peki gelin biraz örnek yapalım daha kalıcı olsun
ilk olarak style tag ı içinde div e hem width hemde height vericeğim ikiside 200px olacak
CSS:
div{
width: 200px;
height: 200px;
}evet div e değerlerimizi verdik şimdi body kısmında iki adet div oluşturalım
ilkinin adı first ikincisinin adı second olsun ve ikisinede arka plan rengi verip iki renkde farklı olsun
şimdi oluşturduktan sonra ek olarak bide margin verelim ilkine 2 ikincisinin değeri ise 4 olsun
HTML:
<div class="bg-danger m-2">first</div>
<div class="bg-primary m-4">second</div>
görseldede gözüktüğü gibi dört bir yandan da margin vermiş olduk her iki div için unutmayın ki bu değer en fazla 5 e kadar gitmekte
peki gelin bide şimdi tek taraftan yani istediğimiz taraftan margin verelim
Margin-Right => mr
Margin-Left => ml
Margin-Top => mt
Margin-Bottom => mb
bunlarada aynı 5 e kadar değer verebiliyoruz
HTML:
<div class="bg-danger ml-2">first</div>
<div class="bg-primary mb-4">second</div>peki gelin bide aynı anda margin vermeyi görelim
margin-top, margin-buttom => my
margin-left, margin-right => mx
HTML:
<div class="bg-danger my-2">first</div>
<div class="bg-primary mx-4">second</div>evet buda örnek kullanımdı
peki gelin bide Padding olayına bakalım
aslında baktığınızda Margin kullanımı ile bire bir aynı tabiki
doğal olarak çıkan sonuç farklı hemen vakit kaybetmeden kullanalım
aynı margin gibi en fazla 5 e kadar değer vere biliyoruz
hatırlarsanız margin i kullanırken m harfini kullanmıştık padding de ise bu harf p harfi oluyor
p-0 p-1 p-2 p-3 p-4 p-5
HTML:
<div class="bg-danger p-2">first</div>
<div class="bg-primary p-4">second</div>kullanımı ise aynı margindeki gibi üste kodda olduğu gibidir
görsellerdede belli olduğu gibi içe doğru 4 bir yandan padding verdi
peki gelin bide ayrı ayrı istediğimiz yere vermeye bakalım
Padding-Right => pr
Padding-Left => pl
Padding-Top => pt
Padding-Bottom => pb
bu şekildedir aynı margin deki gibidir
HTML:
<div class="bg-danger pl-2">first</div>
<div class="bg-primary pt-4">second</div>evet gelin en son olarak bide aynı anda kullanmaya bakalım buda aynı margin gibi sadece m harfi yerine p harfi gelmekte
Padding-top, margin-buttom => py
Padding-left, margin-right => px
HTML:
<div class="bg-danger py-2">first</div>
<div class="bg-primary px-4">second</div>evet dostlar bu ders de bu kadardı bir sonraki bölümde Kenarlık ve Boyutlandırmayı göstereceğim
okuduğunuz için teşekkürler iyi forumlar dilerim
Not: bütün Bootstrap derslerinin kaynakçası BTK Akademidir
Son düzenleme:
