Lekcja 12: Wysokość i szerokość

Do teraz, nie interesowaliśmy się zbytnio rozmiarami elementów z którymi pracowaliśmy. W tej lekcji, popatrzymy na to jak definiować wysokość oraz szerokość elementów.

    * szerokość
    * wysokość

Ustawianie szerokości [width]

Dzięki właściwości width, możesz zdefiniować szerokość elementu.

Ten prosty przykład przedstawia blok w którym został umieszczony tekst:


div.box {
    width: 200px;
    border: 1px solid black;
    background: orange;
}

    * Pokaż przykład

Ustawianie wysokości [height]

Zauważ jak w przykładzie powyżej wysokość bloku uzależniona jest od wysokości zawartości. Możesz wpłynąć na wysokość elementu dzięki właściwości height. Jako przykład spróbujmy ustawić wysokość bloku na 500px:


div.box {
    height: 500px;
    width: 200px;
    border: 1px solid black;
    background: orange;
}

    * Pokaż przykład

Podsumowanie

Lekcja 9, 10, 11 oraz 12 wprowadziła się w model blokowy CSS. Możesz teraz zobaczyć, jak wiele możliwości daje model blokowy. Możliwe że do teraz używałeś tabel HTML do tworzenia układu graficznego na stronie, ale dzięki CSS i modelowi blokowemu masz już możliwość osiągnięcia eleganckiego i bardziej precyzyjnego układu graficznego zgodnego ze standardem W3C.