Top

CSS Dersleri Bölüm 12 – Margin

CSS Dersleri Bölüm 12 – Margin

Uzunca bir boşluktan sonra tekrar yazabildim. Ve şimdi konumuzu anlatayım.

Element çevresindeki boşluklar margin’i tanımlar. Css’te margin olarak kullanabiliriz tabi.

Bir elementin dış çevre boşluğunu ifade eder marjin. (kenarların dışında kalan yerler). Bu bölgenin hiçbir rengi yoktur ve tamamen saydamdır.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Kullanılabilen değerler

Değer Tanım
auto Tarayıcı dış boşlukları ayarlar.
Tarayıcıya bağlı bir sonuç oluşur burada.
length Sabit bir boşluk yani marjin oluşur bu durumda (pixel(px) ile, punto(pt) ile veya em ile belirlenir.)
% Elementin yüzdelik değerini içeren bir boşluk belirtir.

Remarkİçeriye alabilmek için eksi yönde değerler de kullanabilmeniz mümkün.


Margin – Tekil kenarlar

CSS’te, farklı kenarlara farklı boşluk ölçüleri verilmesi mümkündür:

Örnek

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Siz de deneyebilirsiniz bu adresten »

 


Margin – Kısayazım özelliği

Kodun kısa yazımı, tüm margin özelliklerinin tek bir margin tanımında yazılabilmesiyle olur. Bu kısayazım özelliğidir.

Tüm özelliklerin yazımı için margin’de  “margin” kullanılır:

Örnek

margin:100px 50px;

Siz de deneyebilirsiniz bu adreste »

Margin özelliği birden dörde kadar özellik alabilir farklı olarak.

  • margin:25px 50px 75px 100px;
    • üst boşluk 25px
    • sağ boşluk 50px
    • alt boşluk 75px
    • sol boşluk 100px
  • margin:25px 50px 75px;
    • üst boşluk 25px
    • sağ ve sol boşluk 50px
    • alt boşluk 75px
  • margin:25px 50px;
    • alt ve üst boşluk 25px
    • sağ ve sol boşluk 50px
  • margin:25px;
    • tüm boşluklar 25px

 

Örnek uygulamalar

CM kullanarak bir yazının üst boşluğunun ayarlanması

Yüzdelik değer kullanarak bir yazının alt boşluğunun ayarlanması


CSS Margin özelliklerinin hepsinin listesi

Özellik Tanım
margin Kısayazım için tek bildirimde.
margin-bottom Bir elementin taban boşluğunu sağlar
margin-left Bir elementin sol boşluğunu sağlar
margin-right Bir elementin sağ boşluğunu sağlar
margin-top Bir elementin üst boşluğunu sağlar

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 11 - Outline(Anahat/Dışçizgi/İskelet) Özellikleri başlıklı makalemizde css, dersler ve outline hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious