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.