CSS Margin Nedir?

CSS Margin Nedir? : Html nesnelerin 4 kenarına dış boşluk verme amacıyla kullanılmaktadır. HTML elementlerine uygulanan bir CSS özelliğidir. Bu CSS özelliğinin çalışma koşulu o elementin display özelliğinin block olmasıdır. Aynı zamanda dış boşluk vermek yani bu kodu yazmanın bir kaç farklı yöntemi vardır. Bu CSS özelliğinin en çok kullanıldığı elementlerden birisi de div ve a etiketleridir.

Yapacağım örnekleri de div ve a etiketi üzerinden yapacağım. Nedeni de HTML özelliklerinin birinin doğrudan display özelliğinin block diğerinin de display özelliği block değildir.

CSS Margin Kullanımı
CSS Margin Kullanımı

CSS Margin Ne işe Yarar?

HTML elementlerinin dış 4 kenarına istenilen ölçüde boşluk vermeye yaramaktadır. Aynı zamanda tasarım içinde karmaşık görüntülerin önüne geçmektedir. CSS Margin ne işe yaradığı hakkında aşağıda maddeler halinde düşündüklerimi yazacağım bu durumlar dışında da projeniz içinde kullanabilirsiniz.

  • Bir birine yakın elementlerin karmaşık durmalarının önüne geçmek.
  • Elementlerin üst, sağ, alt ve sol taraflarına boşluk verme.
  • Listeleme işlemlerinde elementlere boşluk verilebilir.

CSS Margin Kullanımı

CSS Margin kullanımı hakkında sizlere bilgi vermek istiyorum. Ancak Margin kodunun 2 faklı yazılışı vardır. Bu 2 yazılışı da anlamları ve örnekleriyle paylaşacağım. Yapılmak istenen amaç aynıdır ama bir yazım tarzı diğerinden daha kısa olduğu için yazım farklılıkları olabilir.

Margin Kısa Yazımı

Margin kısa yazı hakkında sizlere söylemek istediğim ve üzerinde durmak istediğim konu margin kodu 4 parametreden oluşmaktadır. Bu parametreler saat yönü şeklindedir.

üst , sağ , alt , sol

Css Kod:

.sinif{
	margin: 5px 15px 10px 20px;
	width:100px;
	height:100px;
	background:#f00;	
}
.a{
	background:#000 !important;
	display:block;
}

Html Kod:

<div class="sinif">iç yazı</div>

<a href="https://webcesi.com" class="sinif a">link</a>

Açıklama: Yukarıdaki Html kod bölümünde görüleceği gibi div ve a elementleri için margin çalışması yaptım. Örnekleri incelerseniz. Bu örneği rahatça anlatabilirsiniz.

Margin Uzun Yazımı

Margin uzun yazım farklılığı da margin kodunun her taraf için ayrı ayrı girilmesidir. Margin özelliğinin teker teker yazılmasının artı yönü vardır. Sadece istenilen bölüme boşluk verilmesidir. Bu çalışmanın örneklerini de aşağıda paylaşıyorum.

  • margin-top : Üst Taraf boşluk
  • margin-right : Sağ Taraf boşluk
  • margin-bottom : Alt Taraf boşluk
  • margin-left : Sol Taraf boşluk

Css Kod:

.sinif-iki{
	margin-top:5px;
	margin-right:15px;
	margin-bottom:10px;
	margin-left:25px;

	width:100px;
	height:100px;
	background:#f00;	
}
.a-iki{
	background:#000 !important;
	display:block;
}

Html Kod:

<div class="sinif-iki">iç yazı</div>

<a href="https://webcesi.com" class="sinif-iki a-iki">link</a>
CSS Margin Nedir?
Etiketlendi: