Wstęp

Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top, margin-bottom), po przypisaniu im wartości auto.

Przedstawione poniżej punkty 1-3 obejmują również elementy pozycjonowane relatywnie.

1. Elementy inline, nie-zastępowane

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Własność height nie ma zastosowania (nie można jej przypisać), ale zależy od wysokości linii (line-height).

2. Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float)

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje przyjęcie wysokości wewnętrznej. Ponadto CSS 2.1 określa przypadek, kiedy element posiada wewnątrzne proporcje (np. obrazek), a przy tym wartość height wynosi auto. W takim przypadku ostateczna wysokość elementu jest obliczana ze wzoru:

(ustawiona szerokość) / (wewnętrzne proporcje)

co oznacza po prostu przeskalowanie elementu tak, aby zachował on swoje proporcje.

3. Elementy nie-zastępowane: blokowe oraz z oblewaniem (float)

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje uzależnienie jej od wysokości elementów dzieci, przy czym pod uwagę nie są brane dzieci z ustawionym oblewaniem (float) ani pozycjonowane absolutnie, natomiast w przypadku dzieci pozycjonowanych relatywnie ich przesunięcie jest pomijane.

4. Elementy pozycjonowane absolutnie, nie-zastępowane

Wysokość i marginesy takich elementów wyznacza się analogicznie, jak w punkcie 7 podrozdziału: Szerokość i marginesy automatyczne, tzn. muszą spełniać następujące równanie:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = wysokość bloku obejmującego

5. Elementy pozycjonowane absolutnie, zastępowane

Sytuacja jest podobna jak w poprzednim punkcie za wyjątkiem tego, że element posiada wewnętrzną wysokość (zobacz punkt 8 podrozdziału: Szerokość i marginesy automatyczne).