Yüzen çerçeve ve metin akış örneğinin geniş açıklaması

Bu resim, metnin bir yüzen çerçevenin etrafını nasıl kuşattığını ve özellikle de, satır çerçevelerinin bir yüzen çerçeveye (kenar boşlukları dahil) yer açmak için nasıl daraltıldığını göstermektedir. Resmin HTML belgesi asıl belgede resimden önce verilmiştir. Kaynak belgede BODY elemanının altında, esas olarak sola kaydırılmış bir IMG içeren bir P elemanı vardır.

IMG elemanının içeren SPAN elemanı IMG elemanının kenar dış boşluklarının çevresine çizgi çizmek için kullanılmıştır (SPAN elemanının kenar iç boşluğu ile IMG elemanının kenar dış boşluğunun {2 em'lik kısımlarının} örtüştüğüne dikkat ediniz).

Paragrafın içindeki metin IMG'nin sağ tarafında üstten başlamakta ve paragrafın sağ kenarına kadar gidip, IMG'nin sağ kenar boşluğunun dışından aşağı doğru satır satır akmaktadır. Metin IMG'nin alt kenar boşluğunu aştığında P elemanı içindeki normal genişliğine dönmektedir. Böylece yüzen çerçevenin yanında kalan satır çerçevelerinin kısaldığı anlaşılmaktadır.

P elemanının kenar iç boşlukları ve SPAN elemanı ile birlikte SPAN kenar dış boşlukları ayrıntıları ortaya çıkarmak için eklenmiştir. Örneğin, P elemanının kenar iç boşluklarının yüzen çerçevenin sağ tarafında yer almadığını ve burada SPAN kenar dış boşluğunun etkili olduğuna dikkat ediniz. Özgün belgedeki örnek bu kadar ayrıntılı değildir ve ayrıca tepedeki BODY ve P kenar boşluklarının örtüştüğünden söz etmektedir. Resmi oluşturan örneğin HTML kodu gerek Firefox (v2.0.0.3) ve gerekse Konqueror (v3.5.5) ile aynı sonucu vermekte üstteki BODY ve P kenar boşlukları örtüşmemektedir. Ancak SPAN iç ve IMG dış kenar boşlukları örtüşmektedir.

Resim Konqueror'un ekran görüntüsü Xpaint ile düzenlenerek elde edilmiştir.

Resme geri dön.