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.
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;
}
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;
}
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.
