Görsel Biçimleme Modelinin Ayrıntıları taşıyıcı blok Taşıyıcı blokun tanımlanması

Bir elemanın çerçevelerinin konumları ve boyutları bazan belli bir dikdörtgene göreli olur, bu dörtgene elemanın taşıyıcı bloku denir. Bir elemanın taşıyıcı bloku şöyle tanımlanır:

Kök elemanın taşıyıcı bloku (ilk taşıyıcı blok da denir) kullanıcı arayüzü tarafından seçilir.

Diğer elemanlar için, eleman mutlak olarak konumlanmış olmadıkça, taşıyıcı blok, blok seviyesinden en yakın üstsel çerçevenin içerik alanının sınırlarına göre biçimlenir.

Eleman için position: fixed atanmışsa taşıyıcı blok görüntü alanı tarafından oluşturulur.

Eleman için position: absolute atanmışsa taşıyıcı blok, position niteliğinin değeri static'ten farklı bir değere sahip en yakın üstsel tarafından şöyle oluşturulur:

Üstselin blok seviyesinden olduğu durumda, taşıyıcı blok üstselin kenar iç boşluğu sınırı tarafından şekillendirilir.

Üstselin satıriçi seviyeden olduğu durumda, taşıyıcı blok üstselin direction niteliğine bağlıdır:

Eğer direction niteliğinin değeri ltr (soldan sağa) ise taşıyıcı blokun üst-solu üstsel tarafından üretilen ilk çerçevenin içerik alanının üst-solu, taşıyıcı blokun alt-sağı ise üstselin son çerçevesinin içerik alanının alt-sağı olur.

Eğer direction niteliğinin değeri rtl (sağdan sola) ise taşıyıcı blokun üst-sağı üstsel tarafından üretilen ilk çerçevenin içerik alanının üst-sağı, taşıyıcı blokun alt-solu ise üstselin son çerçevesinin içerik alanının alt-solu olur.

Eğer böyle bir üstsel yoksa kök elemanın çerçevesinin içerik alanı taşıyıcı blok haline gelir.

 Taşıyıcı blokların gösterilmesi

Bu metin ilk paragraftadır. ...

Bu metin ikinci paragraftadır.

]]>

Hiçbir konumlama olmaksızın yukarıdaki belgenin taşıyıcı blokları (T.B.) şöyle oluşur:

Çerçeveyi üreten Taşıyıcı blokluk yapan
body ilk T.B. (K.A. bağımlı)
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2

Eğer "div1" için konum belirtirsek:

#div1 { position: absolute; left: 50px; top: 50px }

taşıyıcı blok artık "body" olmaz; kendisi ilk taşıyıcı blok haline gelir (başka konumlu üstsel çerçeve olmadığından).

Eğer "em1" için de konum belirtirsek:

#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

taşıyıcı blok tablosu şu hale gelir:

Çerçeveyi üreten Taşıyıcı blokluk yapan
body ilk T.B.
div1 ilk T.B.
p1 div1
p2 div1
em1 div1
strong1 em1

"em1"in konumlanmasıyla, konumlu en yakın üstsel çerçeve (yani, "div1" tarafından üretilen çerçeve) "em1" için taşıyıcı blok haline gelir.

 İçerik genişliği: width niteliği width nitelikler width width uzunluk | yüzdelik | auto | inherit auto yerleştirilmeyen satıriçi seviyeden elemanlar, tablo satırları ve satır grupları hariç tüm elemanlar hayır taşıyıcı blokun genişliği ölçüt alınır görsel

Bu nitelik blok seviyesinden elmanlar ve yerleştirilen elemanlar tarafından üretilen çerçevelerin içerik genişliğini belirtir.

Bu nitelik yerleştirilmeyen satıriçi seviyeden elemanlara uygulanmaz. Yerleştirilmeyen satıriçi seviyeden bir elemanın çerçevelerinin genişliği içlerinde oluşturulan (çocukları göreli olarak konumlanmadan önce) içeriğin genişliğidir. Satır çerçevelerine akan satıriçi çerçeveler yeniden oluşturulur. Satır çerçevelerinin genişliği kendi taşıyıcı bloklarına göre verilir fakat yüzen çerçevelerin varlığı bu genişliği daraltabilir.

Bir yerleştirilen elemanın genişliği yerleşik genişlik olup bu niteliğin değeri auto'dan farklıysa kullanıcı arayüzü tarafından ölçeklenebilir.

Değerlerin anlamları:

Sabit bir uzunluk belirtir.

Genişlik, üretilen çerçevenin taşıyıcı blok genişliği ölçüt alınarak bu değere göre hesaplanır.

Genişlik diğer niteliklerin değerlerine bağlıdır. Aşağıdaki bölümlere bakınız.

width için negatif değer belirtilemez.

Örneğin, aşağıdaki kural paragrafların içerik genişliklerini 100 pikselle sınırlayacaktır:

p { width: 100px } Genişliklerin ve kenar dış boşluklarının hesaplanması

Bir elemanın width, margin-left, margin-right, left ve right niteliklerinin hesaplanan değerleri üretilen çerçevenin türüne ve diğer elemanlara bağlıdır. İlke olarak, hesaplanan değerler auto uygun bir değerle değiştirilerek elde edilen değerlerle aynıdır, fakat bazı istisnalar vardır. Aşağıdaki durumları ayırdetmek gerekli olabilir:

Satıriçi, yerleştirilmeyen elemanlar

Satıriçi, yerleştirilen elemanlar

Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar

Blok seviyesinden, normal akıştaki yerleştirilen elemanlar

Yüzen, yerleştirilmeyen elemanlar

Yüzen, yerleştirilen elemanlar

Mutlak olarak konumlu, yerleştirilmeyen elemanlar

Mutlak olarak konumlu, yerleştirilen elemanlar

1-6. maddeler göreli konumlama içerir.

Satıriçi, yerleştirilmeyen elemanlar

width niteliği uygulanmaz. left, right, margin-left veya margin-right için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir.

 Satıriçi, yerleştirilen elemanlar

left, right, margin-left veya margin-right için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer width ve height niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width niteliğinin hesaplanan değeridir. width niteliği için auto belirtildiği halde height için başka bir değer belirtilmişse width niteliğinin hesaplanan değeri =
(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) ).

 Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar

Eğer left veya right için auto verilmişse hesaplanan değerleri '0' olacaktır. Diğer nitelikler arasında aşağıdaki kısıtlamalara uyulmalıdır:

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = taşıyıcı blok genişliği

(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Eğer yukarıdakilerin hepsi için auto dışında bir değer belirtilmişse değerler "fazla-kısıtlayıcı" denir ve hesaplanan değerlerden biri belirtilmiş değerinden farklı olur. Eğer direction niteliği ltr (soldan sağa) değerine sahipse margin-right için belirtilen değer yoksayılır ve eşitliği doğrulayacak değer kullanılır. direction niteliği rtl (sağdan sola) değerine sahipse margin-left için belirtilen değer yoksayılır ve eşitliği doğrulayacak değer kullanılır.

auto olarak belirtilmiş sadece tek bir değer varsa hesaplanan değer eşitlikten elde edilir.

Eğer width için auto belirtilmişse, diğer auto değerleri '0' haline gelir ve width niteliğinin değeri eşitlikten hesaplanır.

Eğer margin-left ve margin-right niteliklerinin ikisi için de auto belirtilmişse bunların hesaplanan değerleri aynı olacaktır.

width niteliğinin değerinin max-width niteliğinin değerinden büyük ve min-width niteliğinin değerinden küçük olamayacağına dikkat ediniz. Özellikle, negatif olamaz. Aşağıda bölümündeki kurallara bakınız.

 Blok seviyesinden, normal akıştaki yerleştirilen elemanlar

Eğer left veya right için auto verilmişse hesaplanan değerleri '0' olacaktır. Eğer width ve height niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width niteliğinin hesaplanan değeridir. width niteliği için auto belirtildiği halde height için başka bir değer belirtilmişse width niteliğinin hesaplanan değeri =
(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) ).

Eğer kenar dış boşluklarından biri auto ise hesaplanan değeri yukarıdaki kısıtlara göre verilir. Bundan başka, eğer kenar dış boşluklarının ikisi de auto ise bunların hesaplanan değerleri eşit olur.

 Yüzen, yerleştirilmeyen elemanlar

Eğer left, right, width, margin-left veya margin-right nitelikleri için auto belirtilmişse, bunların hesaplanan değerleri '0' olacaktır.

 Yüzen, yerleştirilen elemanlar

Eğer left, right, margin-left veya margin-right nitelikleri için auto belirtilmişse, bunların hesaplanan değerleri '0' olacaktır. Eğer width ve height niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width niteliğinin hesaplanan değeridir. width niteliği için auto belirtildiği halde height için başka bir değer belirtilmişse width niteliğinin hesaplanan değeri =
(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) ).

 Mutlak olarak konumlu, yerleştirilmeyen elemanlar

Bu elemanlar için hesaplanan değerleri saptayan kural:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = taşıyıcı blok genişliği

(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Bu kuralın çözümüne aşağıdaki sıraya göre uygulanan bir miktar ikame sayesinde ulaşılır:

direction niteliğinin değeri ltr (soldan sağa) iken left için auto belirtilmişse auto değeri, taşıyıcı blokun sol kenarından varsayımsal çerçevenin sol kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer negatif olur.

direction niteliğinin değeri rtl (sağdan sola) iken right için auto belirtilmişse auto değeri, taşıyıcı blokun sağ kenarından yukarıdaki ile aynı varsayımsal çerçevenin sağ kenar dış boşluk sınırına olan uzaklık ile değiştirilir. Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer pozitif olur.

Eğer width niteliğinin değeri auto ise left veya right için belirtilmiş auto değerleri varsa bunların yerine '0' konur.

Eğer left, right veya width (hala) auto ise margin-left veya margin-right için belirtilmiş auto değerleri varsa bunların yerine '0' konur.

Bu noktada, margin-left ve margin-right niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.

Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.

Eğer bu noktada değerler "fazla-kısıtlayıcı" ise (direction niteliğinin değeri rtl ise) left veya (direction niteliğinin değeri ltr ise) right için değer yoksayılır ve denklem bu değer için çözümlenir.

 Mutlak olarak konumlu, yerleştirilen elemanlar

Elemanın bir yerleşik genişliğe sahip olması dışında bu durum önceki durumun benzeridir. İkame sırası şöyledir:

Eğer width ve height niteliklerinin ikisi için de auto belirtilmişse elemanın genişliği width niteliğinin hesaplanan değeridir. Eğer width için auto ve height için başka bir değer belirtilmişse width niteliğinin hesaplanan değeri =
(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) ).

direction niteliğinin değeri ltr (soldan sağa) iken left için auto belirtilmişse auto değeri, taşıyıcı blokun sol kenarından varsayımsal çerçevenin sol kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer negatif olur.

direction niteliğinin değeri rtl (sağdan sola) iken right için auto belirtilmişse auto değeri, taşıyıcı blokun sağ kenarından yukarıdaki ile aynı varsayımsal çerçevenin sağ kenar dış boşluk sınırına olan uzaklık ile değiştirilir. Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer pozitif olur.

Eğer left veya right auto ise margin-left veya margin-right için belirtilmiş auto değerleri varsa bunların yerine '0' konur.

Bu noktada, margin-left ve margin-right niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.

Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.

Eğer bu noktada değerler "fazla-kısıtlayıcı" ise (direction niteliğinin değeri rtl ise) left veya (direction niteliğinin değeri ltr ise) right için değer yoksayılır ve denklem bu değer için çözümlenir.

 Azami ve asgari genişlikler: min-width ve max-width nitelikleri min-width nitelikler min-width min-width uzunluk | yüzdelik | inherit Kullanıcı arayüzüne bağlı yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar hayır taşıyıcı blokun genişliği ölçüt alınır görsel max-width nitelikler max-width max-width uzunluk | yüzdelik | none | inherit none yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar hayır taşıyıcı blokun genişliği ölçüt alınır görsel

Bu iki nitelik biçembent yazarlarına çerçeve genişliklerini belli bir aralıkta sınırlama imkanı verir. Değerlerin anlamları şunlardır:

Hesaplanan değerin azamisi veya asgarisi için sabit değer belirtir.

Hesaplanan değerin azamisi veya asgarisi için genişlik, üretilen çerçevenin taşıyıcı blok genişliği ölçüt alınarak bu değere göre hesaplanır.

(Sadece max-width için) Çerçeve genişliği için bir değer yoktur.

Aşağıdaki algoritmada width niteliğinin hesaplanan değeri üzerinde bu iki niteliğin nasıl etki ettiği açıklanmıştır:

Genişlik (min-width ve max-width olmaksızın) bölümünde açıklandığı gibi aşağıdaki kurallara göre hesaplanır.

Eğer min-width niteliğinin hesaplanan değeri max-width niteliğininkinden büyükse max-width niteliğinin değeri min-width niteliğinin değerine eşit yapılır.

Eğer hesaplanan genişlik max-width değerinden büyükse yukarıdaki kurallar tekrar uygulanır fakat bu kez width için belirtilmiş değer olarak max-width değeri kullanılarak uygulanır.

Eğer hesaplanan genişlik min-width değerinden küçükse yukarıdaki kurallar tekrar uygulanır fakat bu kez width için belirtilmiş değer olarak min-width değeri kullanılarak uygulanır.

Kullanıcı arayüzü min-width niteliği için elemandan elemana hatta diğer niteliklere bağlı olarak değişebilen negatif olmayan bir asgari değer tanımlayabilir. Eğer min-width bu sınırın altındaysa bu açıkça böyle belirtildiğinden veya değerin auto olması sebebiyle aşağıdaki kuralların onu çok küçük yapmasından dolayı böyledir; kullanıcı arayüzü hesaplanmış değer olarak asgari değeri kullanabilir.

 İçerik yüksekliği: height niteliği height nitelikler height height uzunluk | yüzdelik | auto | inherit auto yerleştirilmeyen satıriçi elemanlar, tablo sütunları ve sütun grupları hariç tüm elemanlar hayır metne bakınız görsel

Bu nitelik blok seviyesinden ve yerleştirilen elemanlar tarafından üretilen çerçevelerin içerik yüksekliğini belirtir.

Bu nitelik yerleştirilmeyen satıriçi seviyeden elemanlara uygulanmaz. Yerleştirilmeyen satıriçi seviyeden elemanların çerçevelerinin yüksekliği elemanın (muhtemelen miras alınmış) line-height değeri ile belirlenir.

Değerlerin anlamları:

Sabit bir yükseklik belirtir.

Yüksekliği yüzdelik bir değer olarak belirtir. Üretilen çerçevenin taşıyıcı bloku ölçüt alınarak hesaplanır. Eğer taşıyıcı blokun yüksekliği açıkça belirtilmemişse (yani, içerik yüksekliğine bağlıysa) değer olarak auto verilmiş gibi davranılır.

Yükseklik diğer niteliklere bağlı olur. Aşağıya bakınız.

Kullanıcı arayüzü kök eleman için taşıyıcı blok seçiminde özgür olduğundan (bkz, ) kök eleman için yüksekliği örneğin görüntü alanı yüksekliğine göreli bir değer olarak hesaplayabilir. height niteliği için negatif değerler kuraldışıdır.

Aşağıdaki kural paragraf yüksekliğini 100 piksel olarak sabitleyecektir:

p { height: 100px }

100 pikselden daha fazla yüksekliği ihtiyaç duyan paragraflar overflow niteliğine göre taşacaklardır.

 Yüksekliklerin ve Kenar dış boşluklarının hesaplanması

top, margin-top, height, margin-bottom ve bottom niteliklerinin hesaplanabilmesi için aşağıda belirtilen çerçeve türlerinin ayırdedilmeleri gerekir:

Satıriçi, yerleştirilmeyen elemanlar

Satıriçi, yerleştirilen elemanlar

Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar

Blok seviyesinden, normal akıştaki yerleştirilen elemanlar

Yüzen, yerleştirilmeyen elemanlar

Yüzen, yerleştirilen elemanlar

Mutlak olarak konumlu, yerleştirilmeyen elemanlar

Mutlak olarak konumlu, yerleştirilen elemanlar

Points 1-6 include relative positioning.

Satıriçi, yerleştirilmeyen elemanlar

top, bottom, margin-top veya margin-bottom için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. height niteliği uygulanmaz. İçerik alanının yüksekliği elemanın geçerli yazıtipi yüksekliğine eşitlenir. Bir satıriçi, yerleştirilmeyen çerçevenin düşey kenar çizgisi, iç ve dış boşlukları üstte yazıtipinin altındadır, line-height değerine göre değildirler. line-height sadece satır çerçevesinin yüksekliğinin hesabında kullanılır.

Eğer birden fazla yazıtipi yüksekliği kullanılmışsa içerik alanının yüksekliği bu belirtim tarafından tanımlanmaz. Bununla birlikte içerik yüksekliğini en büyük yazıtipi yüksekliğinin belirlemesi önerilir.

 Satıriçi, yerleştirilen elemanlar,
Blok seviyesinden, normal akıştaki yerleştirilen elemanlar ve
Yüzen, yerleştirilen elemanlar

top, bottom, margin-top veya margin-bottom için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer width ve height niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik yüksekliği height niteliğinin hesaplanan değeridir. height niteliği için auto belirtildiği halde width için başka bir değer belirtilmişse height niteliğinin hesaplanan değeri =
(yerleşik yükseklik) * ( (hesaplanan genişlik) / (yerleşik genişlik) ).

 Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar ve
Yüzen, yerleştirilmeyen elemanlar

Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar ve yüzen, yerleştirilmeyen elemanlar için yükseklik hesabı tamamen doğru olmaz. Yükseklik hesabı şöyle olmalıdır:

Eğer top, bottom, margin-top veya margin-bottom için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer height için auto belirtilmişse yükseklik, elemanın blok seviyesinden çocukları olup olmamasına ve kenar iç ve dış boşluklarına sahip olup olmamasına göre değişir.

Eğer sadece satıriçi seviyeden çocukları varsa yükseklik, en üstteki satır çerçevesinin tepesi ile en alttakı satır çerçvesinin altı arasındaki mesafeye eşittir.

Eğer blok seviyesinden çocuklara sahipse yükseklik, en üstteki blok seviyesinden çocuk çerçevenin üst kenar çizgisi sınırı ile en alttaki blok seviyesinden çocuk çerçevenin alt kenar çizgisi sınırı arasındaki mesafeye eşittir. Bununla birlikte, eğer eleman sıfırdan farklı üst kenar iç boşluğu ve/veya üst kenar çizgisi genişliğine sahipse içerik, en üstteki çocuğun üst kenar dış boşluk sınırında başlar. Benzer şekilde, eğer eğer eleman sıfırdan farklı alt kenar iç boşluğu ve/veya alt kenar çizgisi genişliğine sahipse içerik, en alttaki çocuğun alt kenar dış boşluk sınırında biter.

Sadece normal akıştaki çocuklar hesaba katılır (yani, yüzen çerçeveler ve mutlak olarak konumlanmış çerçeveler yoksayılır ve göreli olarak konumlanmış çerçeveler göreli konumları yoksayılarak ele alınır). Çocuk çerçevenin bir anonim çerçeve olabileceğini de gözardı etmeyin.

 Mutlak olarak konumlu, yerleştirilmeyen elemanlar

Mutlar olarak konumlanmış elemanlar için düşey boyutlar şu kurala uygun olmalıdır:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = taşıyıcı blok yüksekliği

(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Bu kuralın çözümüne aşağıdaki sıraya göre uygulanan bir miktar ikame sayesinde ulaşılır:

Eğer top için auto belirtilmişse auto değeri, taşıyıcı blokun üst kenarından varsayımsal çerçevenin üst kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun yukarısında ise değer negatif olur.

Eğer height ve bottom niteliklerinin ikisi de auto ise bottom niteliğinin değeri '0' yapılır.

Eğer bottom veya height (hala) auto ise margin-top veya margin-bottom niteliklerindeki auto değerleri '0' yapılır.

Bu noktada, margin-top ve margin-bottom niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.

Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.

Eğer bu noktada değerler "fazla-kısıtlayıcı" ise bottom değeri yoksayılır ve denklem bu değer için çözümlenir.

 Mutlak olarak konumlu, yerleştirilen elemanlar

Elemanın bir yerleşik yüksekliğe sahip olması dışında bu durum önceki durumun benzeridir. İkame sırası şöyledir:

Eğer width ve height niteliklerinin ikisi için de auto belirtilmişse elemanın yerleşik yüksekliği height niteliğinin hesaplanan değeridir. Eğer height için auto ve width için başka bir değer belirtilmişse height niteliğinin hesaplanan değeri =
(yerleşik yükseklik) * ( (hesaplanan genişlik) / (yerleşik genişlik) )

Eğer top için auto belirtilmişse auto değeri, taşıyıcı blokun üst kenarından varsayımsal çerçevenin üst kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun yukarısında ise değer negatif olur.

Eğer bottom auto ise margin-top veya margin-bottom için belirtilmiş auto değerleri varsa bunların yerine '0' konur.

Bu noktada, margin-top ve margin-bottom niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.

Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.

Eğer bu noktada değerler "fazla-kısıtlayıcı" ise bottom değeri yoksayılır ve denklem bu değer için çözümlenir.

 Azami ve Asgari Yükseklikler: min-height ve max-height nitelikleri

Bir elemanın yüksekliğini belli bir aralıkla sınırlamak bazan yararlı olur. bu işlevselliği iki nitelik sağlar:

min-height nitelikler min-height min-height uzunluk | yüzdelik | inherit 0 yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar hayır taşıyıcı blok yüksekliği ölçüt alınır görsel max-height nitelikler max-height max-height uzunluk | yüzdelik | none | inherit none yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar hayır taşıyıcı blok yüksekliği ölçüt alınır görsel

Bu iki nitelik biçembent yazarlarına çerçeve yüksekliklerini belli bir aralıkta sınırlama imkanı verir. Değerlerin anlamları şunlardır:

Hesaplanan değerin azamisi veya asgarisi için sabit değer belirtir.

Hesaplanan yüksekliğin azamisi veya asgarisi için değer, üretilen çerçevenin taşıyıcı blok yüksekliği ölçüt alınarak bu değere göre hesaplanır. Eğer taşıyıcı blok yüksekliği belirtilmemişse (yanı içeriğin yüksekliğine bağlıysa) yüzdelik değer auto belirtilmiş gibi yorumlanır.

(sadece max-height için) Çerçeve yüksekliği için bir üst sınır olmaz.

Aşağıdaki algoritmada height niteliğinin hesaplanan değeri üzerinde bu iki niteliğin nasıl etki ettiği açıklanmıştır:

Yükseklik (min-height ve max-height olmaksızın) bölümünde açıklandığı gibi aşağıdaki kurallara göre hesaplanır.

Eğer min-height niteliğinin hesaplanan değeri max-height niteliğininkinden büyükse max-height niteliğinin değeri min-height niteliğinin değerine eşit yapılır.

Eğer hesaplanan yükseklik max-height değerinden büyükse yukarıdaki kurallar tekrar uygulanır fakat bu kez height için belirtilmiş değer olarak max-height değeri kullanılarak uygulanır.

Eğer hesaplanan yükseklik min-height değerinden küçükse yukarıdaki kurallar tekrar uygulanır fakat bu kez height için belirtilmiş değer olarak min-height değeri kullanılarak uygulanır.

 Satır yüksekliğinin hesaplanması: line-height ve vertical-align nitelikleri

bölümünde açıklandığı gibi, kullanıcı arayüzleri satıriçi çerçeveleri bir düşey satır çerçeveleri yığını içinde değerlendirirler. Bir satır çerçevesinin yüksekliği şöyle belirlenir:

Satır çerçevesindeki her satıriçi çerçevenin yüksekliği hesaplanır ( ve line-height niteliğine bakınız).

Satıriçi çerçeveler düşey olarak vertical-align niteliğine göre hizalanırlar.

Satır çerçevesinin yüksekliği en üst çerçevenin tepesi ile en alt çerçevenin altı arasındaki mesafeye eşittir.

Boş satıriçi elemanlar boş çerçeveler üretirler, fakat bu çerçevelerin hala kenar çizgileri, iç ve dış boşlukları vardır ve bunlar içeriği olan elemanlar gibi hesaplamalarda etkili olurlar.

Eğer bir satır çerçevesindeki bütün çerçeveler altlarından hizalanıyorlarsa satır çerçevesinin yüksekliği en uzun boylu çerçevenin yüksekliği olur.

satırarası yarım satırarası Satırarası ve yarım satırarası

Satıriçi çerçevenin yüksekliği çerçevedeki metnin yazıtipi yüksekliğinden farklı olabileceğinden (yani, line-height > 1em), oluşturulan harfin altında ve üstünde boşluk olabilir. line-height niteliğinin hesaplanan yüksekliği ile yazıtipi yüksekliği arasındaki farka satırarası ve bunun yarısına da yarım satırarası denir.

Kullanıcı arayüzleri bir satıriçi çerçeve içinde bir karakteri alt ve üstüne yarım satırarası ekleyerek düşeyde ortalarlar. Örneğin, metin '12pt' yükseklikte iken line-height değeri '14pt' ise 2 puntoluk bir yükseklik eklenmiş demektir: 1 punto harfin üstüne bir punto da altına. (Bu boş çerçelere de uygulanır; boş çerçevenin sonsuz darlıkta bir harf içerdiği varsayılır.)

line-height değerinin yazıtipi yüksekliğinden küçük olduğu durumda, satıriçi çerçevenin son yüksekliği yazıtipi yüksekliğinden daha dar olacak ve oluşturulan harf çerçeveden dışarı "pörtleyecektir". Eğer böyle bir çerçeve bir satır çerçevesinin sınırına dokunuyorsa oluşturulan harf bu kez bitişik satır çerçevesine "pörtleyecektir".

Yerleştirilmeyen elemanların kenar çizgileri, iç ve dış boşlukları satıriçi çerçeve yüksekliği hesabına (ve dolayısıyla satır çerçevesi hesabına) girmezlerse de satıriçi çerçevelerin çevresinde yine de oluşturulurlar. Yani, bir satır çerçevesinin yüksekliği içerdiği çerçevelerin dış sınırlarından daha kısaysa artalanların, kenar çizgisinin ve kenar iç boşluğunun renkleri bitişik satır çerçevelerine "pörtleyecektir". Yine de bu durumda, bazı kullanıcı arayüzleri satır çerçevesini kenar çizgisi ve kenar iç boşluklarını "kırpmak" için kullanabilir (yani onları oluşturmaz).

line-height line-height nitelikler line-height line-height normal | sayı | uzunluk | yüzdelik | inherit normal evet elemanın kendi yazıtipi yüksekliği ölçüt alınır görsel

Eğer nitelik içeriği satıriçi seviyeden elemanlarla oluşturulmuş bir blok seviyesinden eleman için belirtilmişse değer, üretilen her satıriçi çerçevenin "olası en küçük" yüksekliğini belirtir. Asgari yükseklik, blokun taban çizgisinin üstündeki bir asgari yüksekliğe bunun altında bir asgari derinlik eklenerek oluşur ve her satır çerçevesinin, blokun yazıtipi ve yükseklik nitelikleriyle sıfır genişlikte bir satıriçi çerçeve (TEX'de "strut" denen şey) ile başladığı varsayılır.

Eğer nitelik bir satıriçi seviyeden eleman için belirtilmişse değer, eleman tarafından üretilen her çerçevenin kesin yüksekliğini belirtir. (Çerçeve yüksekliğinin height niteliği ile belirtildiği satıriçi yerleştirilen elemanlar hariç.)

Bu niteliğin değerlerinin anlamları:

Kullanıcı arayüzüne, hesaplanmış değeri elemanın yazıtipi yüksekliğine dayalı "makul" bir değere ayarlamasını söyler. Değer bir sayı gibi ele alınır. normal için hesaplanmış değerin 1.0 ile 1.2 arasında olmasını öneririz.

Çerçeve yüksekliği bu uzunluğa ayarlanır. Negatif değerler kuraldışıdır.

Niteliğin hesaplanmış değeri elemanın yazıtipi yüksekliği ile bu değerin çarpımıdır. Negatif değerler kuraldışıdır. Bununla birlikte, bu sayı miras alınan bir hesaplanmış değer değildir.

Niteliğin hesaplanmış değeri bu değerle elemanın hesaplanmış yazıtipi yüksekliğinin çarpımıdır. Negatif değerler kuraldışıdır.

Aşağıdaki üç kural aynı satır yüksekliği ile sonuçlanır:

div { line-height: 1.2; font-size: 10pt } /* sayı */ div { line-height: 1.2em; font-size: 10pt } /* uzunluk */ div { line-height: 120%; font-size: 10pt } /* yüzdelik */

Bir eleman birden fazla yazıtipiyle oluşturulan bir metin içeriyorsa, kullanıcı arayüzlerinin line-height değerini en büyük yazıtipi yüksekliğine göre belirlemesi gerekir.

Genellikle, bir paragraftaki tüm satıriçi çerçeveleri için sadece tek bir line-height değeri olduğu (ve uzun resimler olmadığı) takdirde, yukarıda bahsedilen durum, başarılı satırların taban çizgilerinin line-height değerinden kesinlikle bağımsız olacağından emin olunmasını sağlar (?). Bir tabloda olduğu gibi, metin sütunlarının farklı yazıtiplerinin hizalanmasını gerektirdiği durumda bu önem kazanır.

Doğrudan çerçevenin yüksekliğini belirlemek için kullanılmış olmasalar bile yerleştirilen elemanların bir font-size ve bir line-height nitelikleri vardır: em ve ex değerleri font-size değerlerine ve vertical-align için yüzdelik değerler line-height değerlerine görelidir.

vertical-align nitelikler vertical-align vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | yüzdelik | uzunluk | inherit baseline satıriçi seviyeden ve table-cell elemanları hayır elemanın kendi line-height değeri ölçüt alınır görsel

Bu nitelik, bir satıriçi seviyeden eleman tarafından üretilen çerçevelerin bir satır çerçevesi içindeki düşey konumunu etkiler. Aşağıdaki değerler, eğer eleman anonim satıriçi çerçeveler üretiyorsa sadece bir satıriçi seviyeden veya sadece bir blok seviyesinden ebeveyn elemana göre anlamlıdır; böyle bir ebeveynin yokluğunda etkili değildirler.

Bu niteliğin değerleri tablo bağlamında tamamen farklı anlamlara gelir. Ayrıntılar için lütfen bölümüne bakınız.

Çerçevenin taban çizgisi ile ebeveyn çerçevenin taban çizgisi hizalanır. Eğer çerçevelerin taban çizgileri yoksa çerçevelerin alt sınırları hizalanır.

Çerçevenin düşeyde orta noktası ebeveyn çerçevenin taban çizgisinin yarım x-yüksekliği yukarısına hizalanır.

Çerçevenin taban çizgisi, ebeveyn çerçevenin altindisi için uygun yüksekliğe düşürülür. (Bu değerin elemanın yazıtipi yüksekliği üzerinde bir etkisi yoktur.)

Çerçevenin taban çizgisi, ebeveyn çerçevenin üstindisi için uygun yüksekliğe yükseltilir. (Bu değerin elemanın yazıtipi yüksekliği üzerinde bir etkisi yoktur.)

Çerçevenin tepesi ile ebeveyn elemanın yazıtipinin tepesi hizalanır.

Çerçevenin altı ile ebeveyn elemanın yazıtipinin altı hizalanır.

Çerçeve bu değere (bu değerin line-height değeriyle çarpım sonucuna) göre (pozitif ise) yükseltilir veya (negatif ise) alçaltılır. '0%' baseline ile aynı anlama gelir.

Çerçeve bu değere göre (pozitif ise) yükseltilir veya (negatif ise) alçaltılır. '0cm' baseline ile aynı anlama gelir.

Kalan değerler üretilen çerçevenin içinde göründüğü satır çerçevesini kıstas alırlar:

Çerçevenin tepesi ile satır çerçevesinin tepesi hizalanır.

Çerçevenin altı ile satır çerçevesinin altı hizalanır.