Yazar: Margin (dış boşluk) nedir?
margin özelliği bir HTML elementinin çevresi ile ona komşu başka bir HTML elementi arasında belirtilen miktarda genişletip boşluk oluşturur. Bu boşluk kenarlığın dışında olduğu için dış kenarlık ismini vermekteyiz.
Dış kenarlığı belirlerken; üst, sol, alt, sağ gibi belirleme imkanımız var iken tek bir css koduylada her yönden belirleme imkanımız bulunmaktadır.
Margin komutunun kullanım şekilleri:
margin – Hızlı kullanım
margin-top: üstten boşluk
margin-right: sağdan boşluk
margin-bottom: alttan boşluk
margin-left: soldan boşluk
Margin komutunun alabileceği değerler:
auto – Kenarlıklar tarayıcı tarafından otomatik ayarlanır
px: pixel olarak boşluk belirtmek için kullanılır.
% – içerik genişliğine göre oranlar.
Dış boşlukları ayrı ayrı ayarlamak:
Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için margin komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.
css kodu:
.style
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
}
Yukarıdaki örnekte üst ve alt boşluklar 10 piksel yüksekliğinde, sağ ve sol boşluklar 20 piksel genişliğinde olacaktır.
Sadece margin kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki kodun aynısını tek satırda yazabiliriz.
css kodu:
.style
{
/* Açıklama: margin: [üst] [sağ] [alt] [sol] */
margin: 10px 20px 10px 20px;
}
Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanıldığını unutmayalım:
css kodu:
.style
{
/* Açıklama: margin: [üst|alt] [sağ|sol] */
margin: 10px 20px;
}
Yazdığımız bu kod, bir önceki yazdığımız kod ile aynı işlevi görecektir.
Css’de bir diğer bilmemiz gereken boşluk ise iç boşluktur. Şimdi ise iç boşluk konusunu ele alalım.
padding (iç boşluk) nedir?
padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk oluşturmamızı sağlar.
Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilmektedir.
Tüm padding komutları:
padding – Hızlı kullanım
padding-top: üstten boşluk
padding-right: sağdan boşluk
padding-bottom: alttan boşluk
padding-left: soldan boşluk
padding komutunun alabileceği değerler şunlardır:
genişlik belirtme – px, em, pt gibi ölçülerle genişliği belirtme
yüzde kullanma (%) – İçerik genişliğine göre oranlar
Ayrı ayrı iç boşlukları ayarlama:
Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlayabiliriz. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.
css kodu:
.style
{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
}
Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olarak ayarlanmıştır.
İç boşlukları tek bir kod kullanarak ayarlama:
Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki işlemin aynısını elde edebiliriz.
css kodu:
.style
{
/* Açıklama: padding: [üst] [sağ] [alt] [sol] */
padding: 10px 20px 10px 20px;
}
Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanılacağını unutmayalım.
css kodu:
.style
{
/* Açıklama: padding: [üst|alt] [sağ|sol] */
padding: 10px 20px;
}
yazılan bu kod bir önceki kod ile aynı işlevi görmektedir.
Margin ve padding css’de genellikle birlikte kullanıldığı için bende ikisinide tek bir konuda anlatma ihtiyacı hissetim. Margin ve padding ile ilgili soru ve sorunlarınızı çekinmeden yorum yaz kısmından bana ulaştırabilirsiniz. Heğğr kese keyifli bloglamalar dilerim.
Bir önceki yazımız olan css dış kenarlıklar (outline) kullanımı başlıklı makalemizde css dış kenarlıklar (outline) kullanımı, outline color ve outline etiketi ve para metreleri hakkında bilgiler verilmektedir.