Top

margin Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

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.

Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…


Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi  tasarım ve düzen hakkında konuşulduğunda kullanılır.

CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.

Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.

Alttaki resim kutu modelini anlatmaktadır:

Farklı bölümlerin açıklaması:

  • Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
  • Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
  • Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
  • Content – Kutunun içeriğidir yazılar ve resimler burada görünür.

Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.


Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)

Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.

Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:

width:250px;
 padding:10px;
 border:5px solid gray;
 margin:10px;

Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda

Css’in liste özelliği size şunları verir:

  • Sıralı liste elemanları için farklı işaretler,
  • Sırasız liste elemanları için farklı işaretler,
  • liste elemanı işareti için resim atama

 


List

HTML’de iki tip listeleme vardır:

  • sırasız listeler- dairelerle işaretlenmişlerdir tıpkı soldakiler gibi
  • sıralı listeler – sayılar ile işaretlenmişlerdir.

CSS’le, listeler de şekillendirilebilir ve resimler de liste işaretçilerinin yerine kullanılabilir.


Farklı liste elemanı işaretçileri

list-style-type özelliği ile işaretçinin tanımlanması:

Örnek

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Kendiniz deneyin! »

Bir kısmı sırasız liste için bir kısmı sıralı liste için.


Liste elemanı işareti olarak resimler

Bunun için list-style-image özelliği kullanılır:

Örnek

ul
{
list-style-image: url('sqpurple.gif');
}
Kendiniz deneyin »

Yukarıdaki örnek tüm tarayıcılarda düzgün gözükmemekte. IE ve Opera; Firefox, Chrome ve Safari’dekilerden biraz daha büyük gösterecektir resmi.

Tüm tarayıcılarda düzgün gözükmesini istiyorsanız aşağıdaki çözümü uygulamanız gerekmekte.