Connect with us

Hi, what are you looking for?

CSS

CSS Dersleri: margin

CSS Dersleri: object-fit
CSS Dersleri: object-fit

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.

Advertisement. Scroll to continue reading.
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

Written By

Siberdefter'de Chief Executive Officer

Click to comment

Leave a Reply

E-posta hesabınız yayımlanmayacak.

Editörün Tavsiyeleri

CSS

Siberdefter Akademi’de CSS Dersleri kaldığı yerden devam ediyor dostlar ve bugün arayüz kodlarken işimize çok fazla yarayacak olan clamp() fonksiyonundan bahsediyor olacağız. Arayüz kodlarken...

CSS

Siberdefter Akademi’de CSS Dersleri kaldığı yerden devam ediyor ve bugün CSS’in sözde sınıflarından :not() methodunu öğreniyor olacağız. Özellikle detaylı arayüz çalışmalarında oldukça faydası dokunan...

CSS

Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘ne kaldığımız yerden devam ediyoruz, bugünb CSS ile bir yazıya nasıl renk verebiliriz ondan bahsediyor olacağız. Bir...

CSS

Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘nde “object-fit” teriminden bahsediyor olacağız. CSS’te object-fit nedir, CSS’te object-fit kullanımı, CSS “object-fit” ne işe yarar? Bu...

Advertisement