Výška a šířka v CSS

#1 Základ

Základními CSS rozměry pro prvky jsou výška – height, a šířka – width. Hodnotami jsou nejčastěji pixely, procenta a relativní velikosti, ale do obou vlastností se dají vložit další hodnoty.

Výška i šířka prvku nezahrnuje padding, margin, ani okraje. Nastavují pouze vnitřní výšku nebo šířku.

#2 Výška a šířka

Výška se označuje vlastností height, šířka vlastností width. Obě vlastnosti mají v základu nastavenou hodnotu auto, která se přepisuje, pokud je vlastnost pro prvek specifikovaná.

div {

 height: 250px;

 width: 50%;

}

Max a min

Obě vlastnosti mají také své příbuzné vlastnosti s příponami min- a max-, které definují maximální nebo minimální rozměr. Existují tak vlastnosti max-height, max-width a min-height, min-width.

Všechny čtyři vlastnosti se používají zejména pro omezení prvků, aby se zbytečně neroztahovali, a/nebo se nezmenšovali a nedeformovali se tak. Následující příklad určuje prvku šířku 50 %, ale pokud by měla být šířka větší než 1000px, prvek zůstane na tisíci pixelech.

div {

 width: 50%;

 max-width: 1000px;

}

#3 Hodnoty vlastností

Vlastnosti height a width mohou obsahovat více typů hodnot.