Kutu modeli: CSS dış kenar boşluğu birleşimi

Dış kenar boşluğu birleşimi, iki dikey dış kenar boşluğu karşılaştığında, bir dış kenar boşluğu oluşturur.

Birleşen dış kenar boşluğunun yüksekliği, birleşen dış kenar boşluklarının yüksekliklerinden en büyüğüne eşittir.

Dış kenar boşluğu birleşimi

Dış kenar boşluğu birleşimi (ekleme), oldukça basit bir kavramdır. Ancak, web sayfalarını düzenleme sırasında pratikte birçok karışıklığa neden olabilir.

Kısaca, dış kenar boşluğu birleşimi, iki dikey dış kenar boşluğu karşılaştığında, bir dış kenar boşluğu oluşturur. Birleşen dış kenar boşluğunun yüksekliği, birleşen dış kenar boşluklarının yüksekliklerinden en büyüğüne eşittir.

Bir element diğer bir elementin üzerinde görünürken, ilk elementin alt dış kenar boşluğu ve ikinci elementin üst dış kenar boşluğu birleşir. Aşağıdaki resmi görün:

CSS Kenar Boşluğu Birleşimi Örneği 1

Kişisel olarak deneyin

Bir element diğer bir element içinde içerilirken (iç kenar boşluğu veya çerçeve dış kenar boşluklarını ayırmazsa), onların üst ve/veya alt dış kenar boşlukları da birleşir. Aşağıdaki resmi görün:

CSS Kenar Boşluğu Birleşimi Örneği 2

Kişisel olarak deneyin

Göründüğü kadar garip olmasına rağmen, dış kenar boşluğu hatta kendisiyle bile birleşebilir.

Bir boş element varmış gibi varsayalım, bu elemente dış kenar boşluğu var, ancak çerçeve veya doldurma yok. Bu durumda, üst dış kenar boşluğu ve alt dış kenar boşluğu birbirine değecek ve birleşecek:

CSS Kenar Boşluğu Birleşimi Örneği 3

Bu kenar boşluğu, bir başka elementin kenar boşluğu ile karşılaştığında da birleşir:

CSS Kenar Boşluğu Birleşimi Örneği 4

Bu, bir dizi paragraf elementinin çok küçük alan kapamasının nedenidir, çünkü tüm kenar boşlukları bir araya gelir ve küçük bir kenar boşluğu oluşturur.

Kenar boşluğu birleşimi ilk bakışta biraz garip olabilir, ancak aslında anlamlıdır. Çok sayıda paragraf içerikli tipik bir metin sayfası örneğin. İlk paragrafın üzerindeki alan, paragrafın üst kenar boşluğuna eşittir. Kenar boşluğu birleşimi olmadan, sonraki tüm paragraflar arasındaki kenar boşluğu, birbirine komşu üst ve alt kenar boşluğunun toplamı olacaktır. Bu, paragraflar arasındaki alanın sayfa üstündeki iki katı anlamına gelir. Kenar boşluğu birleşimi olduğunda, paragraflar arasındaki üst ve alt kenar boşluğu birleşir ve bu şekilde her yerdeki mesafe aynı olur.

CSS Kenar Boşluğu Birleşiminin Gerçek Anlamı

Açıklama:Yalnızca normal belge akışında blok kutularının dikey kenar boşluğu kenar boşluğu birleşimi olur. Dışa yüklü kutular veya mutlak konum arasındaki kenar boşluğu birleşmez.