Bu yazımda HTML/CSS'in en temel yapı taşlarından olan Margin ve Padding ne işe yarar, aralarındaki fark nedir ve bunların kullanımlarına dair örnekler vererek incelemeye çalışacağız.
Margin Nedir :
Margin uyguladığınız HTML nesnesi, etrafındaki diğer HTML nesnelerinden kendini ittirecek/öteleyecektir.
Örnek :
<div id="Div1" style="background-color:Blue; width:50px; height:50px"></div>
<div id="Div2" style="background-color:Orange; width:50px; height:50px;
margin-left:100px"></div>
Padding Nedir :
Padding, HTML nesnenizden içeri doğru pay bırakmanızı sağlayan CSS özelliğidir.
Örnek :
<div style=”width:180px; height:60px; background-color:green”>
Doğuhan Aydeniz
</div>
<div style=”width:180px; height:60px; background-color:green; padding:15px”>
Doğuhan Aydeniz
</div>
İPUCU : Gördüğünüz üzere objeye padding uyguladığımız zaman, objenin ebatlarıda aynı oranda değişiyor. Yani Padding 15px dediğiimiz için her yanından 15 piksellik inilti ver demiş olduk. Bu da yükseklik ve genişlik olarak 30 piksellik bir büyümeye neden oldu. Eğer aynı ebatlarda kalmasını fakat padding vermek istiyorsanız
Width ve
Height değerini aynı oranda ayarlamamız gerekiyor.
Abone Ol