Šířka a výška

Velikost obsahu prvku nastavují dvě vlastnosti: width (šířka) a height (výška). Takto bychom například nastavili všem obrázkům šířku 300 pixelů a výšku 200 pixelů:

img {
	width: 300px;
	height: 200px;
}

Jednotka px je pixel, malá pevná jednotka. Na běžné obrazovce počítače je jeden pixel jeden bod obrazovky (jemnější obrazovky, například u telefonů, používají na jeden pixel několik bodů). Pro představu: obrazovka telefonu bývá široká zhruba 360 až 430 pixelů, obrazovka počítače často 1280 až 1920 pixelů.

Když šířku a výšku nenastavíme, určí si je prohlížeč sám (jejich výchozí hodnota je auto): nadpis nebo div je široký jako jeho rodič a vysoký tak, jak potřebuje jeho obsah. Když je nastavíme, prvek si tuto velikost drží, i kdyby jeho obsah potřeboval víc nebo méně místa.

Pamatujte, že width a height určují jen velikost obsahu. Polstrování a rámeček se přidávají kolem něj, jak ukazuje obrázek v minulém cvičení. Později v této lekci si ukážeme, jak to změnit.