CSS Margin Daraltma

Bazen iki kenar boşluğu tek bir kenar boşluğuyla kesişir.

Öğelerin üst ve alt kenar boşlukları bazen iki kenar boşluğundan en büyüğüne eşit olan tek bir kenar boşluğuna daraltılır.

Bu sol ve sağ kenar boşluklarında olmaz. Yalnızca üst ve alt kenar boşlukları bundan etkilenir

Aşağıdaki örneğe bakalım;

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>
 

<h1>başlık 1</h1>
<h2>başlık 2</h2>

</body>
</html>

Yukarıdaki örnekte <h1> öğesinin alt kenar boşluğu 50 pikseldir ve <h2> öğesinin üst kenar boşluğu 20 piksel olarak ayarlanmıştır. <h1> ve <h2> arasındaki dikey kenar boşluğunun toplam 70 piksel (50 piksel + 20 piksel) olması gerekiyor. Ancak kenar boşluğunun çökmesi nedeniyle gerçek kenar boşluğu 50 piksel olur.

13 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir