Določitev velikost elementov s CSS

Dimenzije elementa določimo z naslednjimi oblikovnimi lastnostmi:

height

Z oblikovno lastnostjo height določimo višino elementa.

Vrednost	Pomen
`auto`	samodejna nastavitev višine
`dolžina`	absolutna višina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna višina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<img class="auto" src="css.png" width="100" height="100" alt="Logo CSS"/>
<br />
<img class="slika" src="css.png" width="100" height="100" alt="Logo CSS"/>
<br />
<br />
<p class="visina">To je odstavek besedila, ki ima definirano višino z lastnostjo <em>height: 100px</em>.
To je odstavek besedila, ki ima definirano višino z lastnostjo <em>height: 100px</em>.</p>
<p>To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila.
To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila.</p>

.auto { height: auto }
.slika { height: 50px }
.visina { height: 100px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano višino z lastnostjo height: 100px. To je odstavek besedila, ki ima definirano višino z lastnostjo height: 100px.

To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila.

max-height

Z oblikovno lastnostjo max-height določimo največjo dovoljeno višino elementa.

Vrednost	Pomen
`none`	brez omejitve višine
`dolžina`	absolutna višina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna višina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="max-visina">To je odstavek besedila, ki ima definirano višino z lastnostjo
<em>max-height: 30px</em>. To je odstavek besedila, ki ima definirano višino z lastnostjo 
<em>max-height: 30px</em>. To je odstavek besedila, ki ima definirano višino z lastnostjo 
<em>max-height: 30px</em>.</p>

.max-visina { max-height: 30px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano višino z lastnostjo height: 30px. To je odstavek besedila, ki ima definirano višino z lastnostjo height: 30px. To je odstavek besedila, ki ima definirano višino z lastnostjo height: 30px.

min-height

Z oblikovno lastnostjo min-height določimo najmanjšo dovoljeno višino elementa.

Vrednost	Pomen
`dolžina`	absolutna višina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna višina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="min-visina">To je odstavek besedila, ki ima definirano višino 
z lastnostjo <em>min-height: 100px</em>.

.min-visina { min-height: 100px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano višino z lastnostjo min-height: 100px.

width

Z oblikovno lastnostjo width določimo širino elementa.

Vrednost	Pomen
`auto`	samodejna nastavitev širine
`dolžina`	absolutna širina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna širina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<img class="auto" src="css.png" width="100" height="100" alt="Logo CSS"/>
<br />
<img class="slika" src="css.png" width="100" height="100" alt="Logo CSS"/>
<br />
<br />
<p class="sirina">To je odstavek besedila, ki ima definirano širino z lastnostjo <em>width: 200px</em>.
To je odstavek besedila, ki ima definirano širino z lastnostjo <em>width: 200px</em>.</p>
<p>To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila.
To je običajen odstavek besedila. To je običajen odstavek besedila. To je običajen odstavek besedila.</p>

.auto { width: auto }
.slika { width: 50px }
.sirina { width: 200px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano širino z lastnostjo width: 200px. To je odstavek besedila, ki ima definirano širino z lastnostjo width: 200px.

max-width

Z oblikovno lastnostjo max-width določimo največjo dovoljeno širino elementa.

Vrednost	Pomen
`none`	brez omejitve širine
`dolžina`	absolutna širina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna širina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="max-sirina">To je odstavek besedila, ki ima definirano maksimalno dovoljeno širino z lastnostjo
<em>max-width: 200px</em>. To je odstavek besedila, ki ima definirano maksimalno dovoljeno širino z lastnostjo
<em>max-width: 200px</em>.

.max-sirina { max-width: 200px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano maksimalno dovoljeno širino z lastnostjo max-width: 200px. To je odstavek besedila, ki ima definirano maksimalno dovoljeno širino z lastnostjo max-width: 200px.

min-width

Z oblikovno lastnostjo min-width določimo najmanjšo dovoljeno širino elementa.

Vrednost	Pomen
`dolžina`	absolutna širina v mm, cm, in, pt, pc, em, ex, px
`%`	relativna širina v %
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="min-sirina">To je odstavek besedila, ki ima definirano minimalno dovoljeno širino z lastnostjo
<em>min-width: 300px</em>. To je odstavek besedila, ki ima definirano minimalno dovoljeno širino z lastnostjo
<em>min-width: 300px</em>.

.min-sirina { min-width: 300px; background-color: #fccc88 }

To je odstavek besedila, ki ima definirano minimalno dovoljeno širino z lastnostjo min-width: 300px. To je odstavek besedila, ki ima definirano minimalno dovoljeno širino z lastnostjo min-width: 300px.

Nazaj

Naprej