Margin ve padding kenar boşlukları nedir nasıl yapılır?

Web sayfalarında sayfa, yazı alanı, paragraf, hatta tek satır yazı veya resim alanı kenar boşlukları /mesafeleri için CSS style veya HTML sayfalarında kullandığımız kodlar, ayar ölçüleri margin ve padding olarak adlandırılırlar.

Margin ve padding kenar boşlukları nedir nasıl yapılır konusu işlenmiştir.

Örnek Resim

Sağda örnek resim var. Fakat aşağıdakiler ise resim değil. Onları css-html kodlarıyla oluşturdum. Kullanımlarının nasıl olacağını ve aralarındaki farkları aşağıda detaylarıyla açıkladım.

Margin

Paragraflar, resimler ve tablolar gibi elemanların diğer elemanlarla aralarında olması gereken mesafeyi belirler. Yani dış kenarlardaki boşluk demektir. Kenar çizgileri olan bir yazı alanından örnek verirsem daha iyi anlarsınız. Aşağıdaki örneğe dikkat edin.

Örnek yazı alanı:
Burada “margin” ve “padding” hakkında bilgi veriliyor.

Siyah ve kırmızı çizgileri yok sayın. Çünkü onları mesele anlaşılsın diye koydum. Yazı alanı açık gri zemine sahip ve kırmızı çizgi ile çerçeveledim. Kırmızı çizgi ile siyah çizgi arasındaki beyaz alan, gri yazı alanının margin’idir. Yani dış kenar boşluğudur. Eğer burada margin tanımlanmasaydı şöyle görünecekti:

Örnek yazı alanı:
Burada “margin” ve “padding” hakkında bilgi veriliyor.

Padding

İç kenarlardaki boşluk ayarları için kullanılan kelimedir. Üstteki örneklerde gri yazı alanındaki kelimelerin en solunda, en sağında, en altta ve en üstte boşluklar vardır. İşte bu boşluklara padding denir. İç kısımdaki kenar boşluklarıdır. Eğer padding tanımlaması olmasaydı bakın şöyle görünecekti:

Örnek yazı alanı:
Burada “margin” ve “padding” hakkında bilgi veriliyor.

Margin Yazılışları

margin: 10px; Eğer böyle yazılırsa dört yan için geçerlidir.
margin-left: 10px; Sadece sol dış boşluk için. Bunun gibi, margi-right sağ dış boşluk içindir.
left: sol | right: sağ | top: üst | bottom: alt
Her bir kenar için farklı ölçüler olduğunda kısa yoldan yazılır. Örnek:
margin: 10px 5px 20px 5px; dikkat edin noktalı virgül en sonuncusuna konuyor.

Peki dört yan için bu ölçüler veriliyor ama hangisi sağ, hangisi sol, hangisi alt, hangisi üst dış boşluk için?
Cevap:
Soldan sağa: üstpx sağpx altpx solpx;
Yani:
margin: 10px 5px 20px 5px;
margin: üst…sağ..alt…sol;

Sıralamayı iyi belleyin (sırasıyla: üst, sağ, alt, sol). Çünkü her zaman her yerde kesin olarak aynıdır, değişmez.

Bir soru:
Peki bir kenar için boşluk bırakmak istemezsek ne yapacağız? Çünkü bazen öyle gerektiği durumlar olur.
Cevap:
O zaman sıfır yazacaksınız.
Örnek: margin: 10px 5px 0 5px; burada alt boşluk bırakılmadı, onun için sıfır dendi. Sıfır için sonuna px koymak gerekmiyor.

Padding Yazılışları

Aynen margin’de olduğu gibidir. Sadece başlarda margin yerine padding yazacaksınız. Padding iç boşluklar için kullanılıyordu unutmayın.

Yazar: Erdal Yüksel

Kategori: Yaşam

Etiketler:


Sorunuzu / Yorumunuzu Aşağıya Yazabilirsiniz.

Lütfen sorunuzu konu ile ilgili sayfaya yazmaya gayret edin.

Sorunuzu/Yorumunuzu yazın:

Sorunuz cevabımla birlikte 1 veya birkaç saat içinde burada görünür olacaktır. Lütfen ara sıra kontrol edin.