CSS’ te margin özelliği öğelerin etrafında boşluk oluşturmak için kullanılır. Saygfa içinde kullanılan öğenin her bir kenarı için (üst, alt, sağ, sol) kenar boşluğu ayarlanabilir.
CSS ile üst, alt, sağ ve sol kenar boşluklarını ayarlamak için aşağıdaki özellikler kullanılır.
margin-topmargin-rightmargin-bottommargin-left
Yukarıdaki kenar boşluğu bırakmak için kullanılacak özellikler aşağıdaki değerleri alabilir.
- auto – Bırakılacak kenar boşluğunu browser ayarlar.
- length – kenar boşluğunu px, pt, cm, vs. olarak belirtir. Ör: 20px
- % – Kapsayıcı öğeningenişliğinin % değeri olarak kenar boşluğu bırakır.
- inherit – Kenar boşluğunun üst öğe (parent) miras alması gerektiğini belirtir.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: aqua; } </style> </head> <body> <h2>CSS Margin Kullanımı</h2> <div>Bu div öğesinin 100px'lik bir üst kenar boşluğu, 150px'lik bir sağ kenar boşluğu, 100px'lik bir alt kenar boşluğu ve 80px'lik bir sol kenar boşluğu vardır.</div> </body> </html> |
Kenar boşluklarını yukarıdaki gibi ayrı ayrı yazmak yerine aşağıdaki gibi kısaltılmış bir yazım mümkündür.
1 2 3 4 5 6 7 | div{ margin: 25px 50px 75px 100px; } |
Yukarıdaki CSS kodu ile üst kenar boşluğu 25px, sağ kenar boşluğu 50px, alt kenar boşluğu 75px ve sol kenar boşluğu için 100px olarak ayarlanmıştır.
margin özelliği 3 (üç) değere sahipse;
margin: 25px 50px 75px;
- üst margin is 25px
- sağ and sol margin 50px
- alt margin 75px olarak ayarlanır.
margin özelliği 2 (iki) değere sahipse;
margin: 25px 50px;
- üst ve alt margin 25px
- sol ve sağ margin 50px olarak ayarlanır.
margin özelliği tek değere sahipse;
margin: 25px;
- Tüm kenar boşlukları 25px olarak ayarlanır.
CSS “margin:auto” Kullanımı
Bir öğeyi kapsayıcısında yatay olarak ortalamak için kenar boşluğunu auto olarak ayarlayabilirsiniz.
Öğe belirtilen genişliği alacak ve daha sonra kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <title>tasarimkodlama.com</title> <style> div { width:300px; margin: auto; border: 1px solid red; } </style> </head> <body> <h2>margin:auto Kullanarak Ortalama</h2> <p>Öğeyi kapsayıcısında yatay olarak ortalamak için kenar boşluğunu otomatik olarak ayarlayabilirsiniz. Öğe belirtilen genişliği alacaktır ve kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir:</p> <div> Bu div öğesi "margin: auto;" kullanılarak yatay olarak ortalanmıştır. </div> </body> </html> |
CSS “margin : inherit” Kullanımı
Aşağıdaki örnekte p öğesinin sol kenar boşluğu ana öğeden (kapsayıcı – div) miras alınmıştır. (50px)
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <style> div { border: 1px solid red; margin-left: 50px; } p.ex1 { margin-left: inherit; } </style> </head> <body> <h2>margin:inherit Kullanma</h2> <p>Aşağıdaki örnekte p öğesinin sol kenar boşluğu kapsayıcısından (div) alınmıştır. <div>a <p class="ex1">Bu paragrafın kalıtsal bir sol kenar boşluğu vardır (div öğesinden).</p> </div> </body> </html> |
1 Yorum