Merhaba,

Bu dersimizde margin ve padding yapısını inceleyeceğiz. Margin atadığımız elementin kenarlıklarının dışındaki alanın boyutunu ayarlamamıza yarayan özelliktir. Padding ise atadığımız elementin kenarlıkları ile elementin içeriği arasındaki alandır.

Padding ile Margin karıştırılan kavramlardır.

• Margin border dan sonrası
• Padding Border ile içerik arasındaki alandır.

Margin sadece boşluktur ve saydam yapıdadır. Dolayısı ile herhangi bir bacground ataması yapayız.

Padding ise hangi elemente atandı ise o elementin background color özelliğini alır. Şimdi bir örnek yapalım.

Margin;

Yukarıda yazdığımız komut ile p elementinin kenar çizgilerinin sonrasına 10px lik bir boşluk bırakmış olduk. Burada dikkatinizi çektimi bilmiyorum ancak sadece bir adet uzunluk birimi yazdık. Marginde 4 bir yan için ayrı ayrı tanımlama yapabiliriz.

Yukarıdaki şekilde tanımlama yapabileceğimiz gibi şu şekilde de tanımlama yapabiliriz.

Margin : 10px 5px 5 px 15 px; buradaki püf noktası margin tanımlaması yaparken tanımlama yukarıdan başlar ve saat yönünde devam eder. Yani ;

Margin:5 px 4 px 3 px; gibi bir tanımlama yaparsak  top, right , bottom ayarlarına müdahale etmiş oluruz.

Padding;

Padding yukarıda da anlattığım üzere elementin borderı ile elementin içindeki içerik arasındaki boşluğu yönetmemize yarayan alandır. Tanımlamaları margin le aynıdır. Dolayısı ile sadece bir örnek vereceğim.

İyi Günler Dilerim