CSS širina i visina blok elemenata

Css svojstvo širine

Pomoću css svojstva width određujemo širinu elementa. Uz njega postoje i css svojstva za određivanje najmanje (svojstvo min-width) i najveće dopuštene širine (svojstvo max-width) html elementa.

Css svojstvo width

Vrijednost css svojstva width (to vrijedi i za svojstva min-width i max-width) možemo zadati kao:

numeričku vrijednost, koja može biti izražena u px, em, rem, vh and vw jedinicama

auto (zadano) - web preglednik računa širinu html elementa ovisno o veličini sadržaja

postotak širine roditeljskog elementa (tako će vrijednost 50% zauzeti 50% širine roditeljskog elementa)

initial - postavlja širinu na njezinu zadanu (engl. default) vrijednost

inherit - širina će biti naslijeđena od roditeljskog elementa

Css svojstvo max-width

Pomoću css svojstva max-width određujemo najveću (maksimalnu) širinu koju html element može zauzeti.

U slučaju prekoračenja širine, pomoću css svojstva overflow, određujemo što će se dogoditi sa sadržajem koji ne stane unutar širine max-width.

U slučaju kada je širina prozora web preglednika (npr. na mobitelima) manja od širine html elementa, a nismo ograničili najveću širinu, web preglednik dodaje vodoravni kliznik (engl. scrollbar) ispod html elementa.

Kada ograničimo najveću širinu html elementa pomoću css svojstva max-width, poboljšat će se izgled web stranice na mobitelima.

Ako je najveća vrijednost širine max-width html elementa, manja od vrijednosti width istog elementa, širina html elementa će biti ograničena na vrijednost css svojstva max-width (vrijednost css svojstva width će se zanemariti).

Css svojstvo min-width

Pomoću css svojstva min-width određujemo najmanju (minimalnu) širinu koju html element može zauzeti.

Ako je vrijednost min-width elementa veća od vrijednosti width istog elementa, web preglednik će za html element zauzeti širinu koja je dodjeljena min-width css svojstvu.

Css svojstvo visine

Pomoću css svojstva height određujemo visinu elementa. Uz njega postoje i css svojstva za određivanje najmanje (svojstvo min-height) i najveće dopuštene visine (svojstvo max-height) html elementa.

Css svojstvo height

Vrijednost css svojstva height (to vrijedi i za svojstva min-height i max-height) možemo zadati kao:

numeričku vrijednost, koja može biti izražena u px, em, rem, vh and vw jedinicama

auto (zadano) - web preglednik računa visinu html elementa ovisno o veličini sadržaja

postotak visine roditeljskog elementa (tako će vrijednost 50% zauzeti 50% visine roditeljskog elementa)

initial - postavlja visinu na njezinu zadanu (engl. default) vrijednost

inherit - visina će biti naslijeđena od roditeljskog elementa

Css svojstvo max-height

Pomoću css svojstva max-height određujemo najveću (maksimalnu) visinu koju html element može zauzeti.

U slučaju prekoračenja visine, pomoću css svojstva overflow, određujemo što će se dogoditi sa sadržajem koji ne stane unutar visine max-height.

Ako je dodjeljena vrijednost max-height elementa, manja od dodijeljene vrijednosti height istog elementa, visina html elementa će biti ograničena na vrijednost dodjeljenu svojstvu max-height (vrijednost css svojstva height će se zanemariti).

Css svojstvo min-height

Pomoću css svojstva min-height određujemo najmanju (minimalnu) visinu koju html element može zauzeti.

Ako je dodjeljena vrijednost min-height elementa veća od dodijeljene vrijednosti height istog elementa, web preglednik će za html element zauzeti visinu koja je dodjeljena min-height css svojstvu.

Poravnanje po sredini

Html blok elementi uvijek zauzimaju punu širinu roditeljskog elementa. Ako suzimo širinu html elementa (pomoću css svojstva width), jednostavno ga možemo poravnati vodoravno po sredini.

To nam omogućava css svojstvo margin kojemu dodjeljujemo vrijednost 0 auto (0 označava gornju i donju, a auto lijevu i desnu marginu). Vrijednost auto označava da će se lijeva i desna rubnica (engl. margin) biti jednake.

Element zauzima širinu koju smo dodijelili css svojstvu width, a preostali prostor se dijeli na dva jednaka dijela i dodjeljuje lijevoj i desnoj rubnici (engl. margin).

Možda će vas zanimati?