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

Web sayfalarında sayfa, yazı alanı, paragraf, hatta tek satır veya resim alanı kenar boşlukları için CSS style veya HTML sayfalarında kullanılan kodlar margin ve padding olarak adlandırılırlar.

Bunların kullanımlarının nasıl olacağını ve aralarındaki farkları aşağıda öğrenebilirsiniz.

Margin

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. Mesele anlaşılsın diye koydum. Yazı alanı açık gri zemine sahip ve kırmızı çizgi ile çerçevelendi. 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şluklar 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;
Bir soru:
Peki bir kenar için boşluk bırakmak istemezsek ne yapacağız?
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 yazı dili kurallarına saygılı olalım.


(Yazamıyorsanız Mozilladan deği Google Chrome ile giriş yapın.)