” etiketleyin ve “ renk ” siyaha:

>
= '../kitap.jpg' yükseklik = 'elli%' ; Genişlik = 'elli%' >

= 'arka plan rengi: dodgerblue' >

= 'siyah renk;' > Linuxhint'e hoş geldiniz >
>
>

Yukarıdaki kodu derledikten sonra çıktı şöyle görünür:

---

---

“

” etiketi, negatif bir kenar boşluğu uygulamadan önce web sayfasının altındadır.

Negatif Kenar Boşluğu Üst Özelliğini Kullanma

Eklemek ' kenar boşluğu ” mülkiyet “

” öğesini seçin ve değerini negatif olarak verin. Örneğin, burada -%15, margin-top özelliğinin değeridir:

>
= '../kitap.jpg' yükseklik = 'elli%' ; Genişlik = 'elli%' >

= 'arka plan rengi: dodgerblue' >

= 'renk: siyah; kenar boşluğu: -%15;' > Linuxhint'e hoş geldiniz >
>
>

Kodu çalıştırdıktan sonra, web sayfası şöyle görünür:

Çıktı, negatif kenar boşluğunun üst öğenin önünde '

' öğesini gösterdiğini gösterir.

Negatif Kenar Boşluğu Alt Özelliğini Kullanma

Yukarıdakiyle aynı özellikleri uygulayın ve sadece “ kenar boşluğu ' mülk. Bundan sonra, görsel değişiklikleri görmek için “

” öğesinin altına bir resim ekleyin:

< div stil = 'arka plan rengi: dodgerblue' >
< h3 stil = 'renk: siyah; alt kenar boşluğu: -%5;' > Linuxhint'e hoş geldiniz h3 >
div >
< img kaynak = '../kitap.jpg' yükseklik = 'elli%' ; Genişlik = 'elli%' >

Kodu güncelledikten sonra web sayfamız şöyle görünür:

Yukarıdaki çıktı, metnin -%5'lik alt kenar boşluğunu aldığını gösteriyor.

Negatif Kenar Hakkı Özelliğini Kullanma

elemanına -%55 margin-right özelliği vererek ters yönde hareket eder:

< div stil = 'arka plan rengi: dodgerblue;' >
< h3 stil = 'renk: siyah; sol kenar boşluğu: -%55; ' > Linuxhint'e hoş geldiniz < / h3 >
< / div >
< img kaynak = '../kitap.jpg' yükseklik = 'elli%' ; Genişlik = 'elli%' >

Kod çıktısını yürüttükten sonra şöyle görünür:

Çıktı, metnin sağdan negatif kenar boşluğu aldığını gösterir.

Negatif Sol Kenar Boşluğu Özelliğini Kullanma

Negatif bir değere sahip olan margin-left özelliği aynı şekilde çalışır. Aşağıdaki kodda “

” elementi, margin-left özelliğine ters yönde %50 sola hareket eder:

= 'arka plan rengi: dodgerblue;' >

= 'renk: siyah; sol kenar boşluğu: -%50;' > Linuxhint'e hoş geldiniz >
>
= '../kitap.jpg' yükseklik = 'elli%' ; Genişlik = 'elli%' >

Yukarıdaki kodun çıktısı:

Negatif kenar boşluğu CSS'de böyle çalışır.

Neden kenar boşluğu: -5 != kenar boşluğu: 5?

Ne zaman ' kenar boşluğu:% 5 ” kullanıldığında, alt taraftan elemanın merkezine doğru bir kenar boşluğu ekler, ancak “ kenar boşluğu: -5% ” kullanılırsa, üstten %5'lik bir kenar boşluğu ekler, ancak ters yönde (sayfanın dışında).

Çözüm

CSS'de, negatif kenar boşluğu, kenar boşluğu değeri atayarak ters yönde çalışır. Öğenin içeriğini sayfanın dışına/dışarı doğru hareket ettirir. 'margin-top:-5', 'margin-bottom:5' değerine eşit değildir çünkü her iki özellik değeri de içeriği ana konuma karşılık gelen zıt yönlerde hareket ettirir. Bu makale, negatif marjın nasıl çalıştığını başarıyla göstermiştir.