“ kenar boşluğu ” özelliği, birçok geliştiricinin duyarlı düzenler oluşturmasına ve HTML öğelerini konumlandırmasına yardımcı olur. 'margin-top' özelliğinin kullanımı, HTML öğeleri üzerinde daha fazla kontrol sağlar, görsel ayrım ekler ve daha iyi yanıt veren tasarımlar oluşturmaya yardımcı olur. Bu kılavuz, CSS'de pratik uygulamayla birlikte kenar boşluğu özelliğini gösterir.
- 'margin-top' Özelliği nedir?
- 'margin-top' Özelliğini Pozitif Değerle Kullanın
- 'margin-top' Özelliğini Negatif Değerle Kullanma
'margin-top' Özelliği nedir?
“ kenar boşluğu ” özelliği, HTML öğeleri arasında fazladan boşluk oluşturmak için kullanılır. Hem pozitif hem de negatif değerlerle ayarlanabilir. Bu değerler, tasarımın gereksinimlerine göre ayarlanır ve HTML öğeleri arasındaki örtüşmenin önlenmesine ve boşlukların ayarlanmasına yardımcı olur.
Pozitif Bir Değerle “margin-top” Özelliği Nasıl Kullanılır?
Pozitif bir değere sahip 'margin-top' özelliği, seçilen HTML öğesinin üst konumundan merkezine doğru fazladan boşluk ekler. Sağlanan değer piksel, yüzde, rem veya auto, inherit, unset vb. global değerler olabilir. Daha iyi anlamak için bir örnek üzerinden gidelim:
Örnek: Pozitif Değer Kullanımı
“ Oluşturan bir HTML dosyası varsayalım. HTML yapısının oluşturulmasından sonra CSS özelliklerini “ pozitif ' sınıf: Yukarıdaki kod parçacığında: Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür: Yukarıdaki gif, web sayfasındaki margin-top özelliğinin değerini ayarlamanın etkisini göstermektedir. “ kenar boşluğu Negatif değere sahip 'özelliği, seçilen HTML öğesine göre sayfanın merkezinin karşısındaki üst konumundan veya sayfanın dışına doğru ekstra boşluk ayarlar. Çoğunlukla örtüşen efektler oluşturmak için veya HTML öğesinin konumlandırılmasında kullanılır. Daha iyi anlamak için bir örnek üzerinden gidelim. Örnek: Negatif Değerin Kullanımı “ Oluşturan bir HTML dosyası varsayalım. Yukarıda belirtilen kod parçacığının açıklaması aşağıda açıklanmıştır: Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür: Yukarıdaki gif, margin-top özelliği için negatif değer ayarlayarak web sayfasının tasarımında meydana gelen etkiyi gösterir. “ kenar boşluğu ” özelliği, HTML öğeleri arasında fazladan boşluk oluşturmak için kullanılır. Hem pozitif hem de negatif değerlerle ayarlanabilir. 'margin-top' özelliğine pozitif bir değer atanırsa, fazladan boşluk web sayfasının veya seçilen HTML öğesinin merkezine doğru eklenir. 'Negatif' bir değer olması durumunda, boşluk sayfanın dışına doğru eklenir. Bu makale, CSS'de kenar boşluğu özelliğinin ne olduğunu göstermektedir.
< vücut >
< div sınıf = 'pozitif' >
< P > Pozitif bir değere sahip üst kenar boşluğu atanır P >
div >
vücut >
< stil >
.pozitif {
genişlik: 300 piksel;
yükseklik: 200 piksel;
arka plan rengi: orman yeşili;
yazı tipi boyutu: 20px;
renk: #fff;
kenar boşluğu: 50 piksel;
}
stil >
Negatif Değerle 'margin-top' Özelliği Nasıl Kullanılır?
.olumsuz {
Beyaz renk;
metin hizalama: merkez;
arka plan rengi: kırmızı ;
kenar boşluğu: -30 piksel ;
dolgu: 30 piksel;
yükseklik: 100 piksel;
}
stil >
< vücut >
< div sınıf = 'olumsuz' >
Negatif Değer atanır için Kenar boşluğu özelliği
div >
vücut >
Çözüm