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.



<< Lesson 11: Obramowania

Lesson 13: Elementy pływające (float) >>