Siberdefter’de CSS Dersleri kaldığı yerden devam ediyor dostlar, bugün ‘margin’ özelliği CSS’te ne işe yarar bize ne sağlar bunu öğreniyor olacağız.
Bir websitesine girdiğimiz zaman bizi güzel bir düzen karşılar, örneğin Google’da bir arama yaptığımız zaman çıkan sonuçların birbirinin arasında eşit bir boşluk vardır ve bu sayede onca bilgi onca içerik bize karmaşık gelmez.
CSS’te ‘margin’ özelliği ise bize bu boşluğu sağlıyor. Seçtiğimiz bir nesneye dış boşluk vermemize olanak tanıyor. Böylelikle bir kutucuğun üstüne, sağına, soluna, altına istediğimiz kadar boşluk bıraktırabiliyoruz.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}Bu örnekte paragraf etiketi olan “p”yi CSS’te seçerek üst, alt, sağ ve sol taraflarına dıştan boşluk verdiğimizi görüyorsunuz. CSS’te tıpkı örnekteki gibi tek tek istediğimiz tarafına istediğimiz değerde boşluk verebiliriz.
p {
margin: 25px;
}ya da bu örnekte olduğu gibi her tarafına aynı eşit değerde boşluk verebiliriz. Ayrıca şunu unutmayın CSS’te tek satırda sağına, soluna, üstüne ve altına istediğimiz farklı değerlerde dış boşluk (margin) verebiliriz.
p {
margin: 25px 50px 75px 100px;
}Bu kullanımda ise tek satırda hem sağına hem soluna hem üstüne hem de altına farklı değerlerde margin (dış boşluk) tanımladık. Yukarıdaki tek satır kullanımın dizilişi şu şekilde;
- top margin 25px
- right margin 50px
- bottom margin 75px
- left margin 100px
