CSS - Dimenzije

Postavljanje dimenzija elementa

CSS ima nekoliko svojstava dimenzija, kao što su širina, visina, maksimalna širina, minimalna širina, maksimalna visina i minimalna visina. Ova svojstva vam omogućavaju da kontrolišete širinu i visinu elementa. Ova lekcije opisuju kako koristiti ova svojstva za stvaranje boljeg izgleda web stranice.


Podešavanje širine i visine (Width and Height)

Svojstvo width i height definiše širinu i visinu područja sadržaja elementa. Ova širina i visina ne uključuju podloge, bordere ili margine. Pogledajte lekciju CSS Box Model da biste saznali kako se izračunava efektivna širina i visina okvira elementa. Isprobajmo sljedeći primjer i pogledajte kako to zapravo funkcioniše: 

div {
    width: 300px;
    height: 200px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje širine i visne elementa</title>
<style>
  div {
    width: 300px;
    height: 200px;
    background: #eee8aa;
  }
</style>
</head>
<body>
  <div>Poigrajte se s vrijednostima da vidite kako funkcioniše!</div>
</body>
</html>

Gornja pravila stila elementu <div> dodjeljuju fiksnu širinu od 300px i visinu od 200px. Svojstva width i height mogu imati sljedeće vrijednosti:

  • dužina (length) - određuje širinu u px, em, rem, pt, cm itd.
  • % - navodi širinu u procentima (%) širine elementa koji sadrži.
  • auto - pretraživač izračunava odgovarajuću širinu elementa.
  • početno (initial) - postavlja širinu i visinu na zadanu vrijednost, koja je automatska.
  • nasljediti (inherit) - specifikuje da širinu treba nasljediti od nadređenog elementa.

Ne možete odrediti negativne vrijednosti za svojstva širine i visine (width i height).


Postavljanje maksimalne širine i visine

Svojstvo max-width i max-height možete koristiti da odredite maksimalnu širinu i visinu područja sadržaja. Ova maksimalna širina i visina ne uključuju podloge, bordere ili margine (eng. paddings, borders or margins). Element ne može biti širi od vrijednosti max-width, čak i ako je vrijednost svojstva width postavljena na nešto veće. Na primjer, ako je širina postavljena na 300px, a maksimalna širina postavljena na 200px, stvarna širina elementa biće 200px. Pogledajmo primjer: 

div {
    width: 300px;
    max-width: 200px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje maksimalne širine elementa</title>
<style>     
    div {
        width: 300px;
        max-width: 200px;
        background: #bbb3ff;
    }
    p {
        float: left;
        max-width: 400px;
        background: #eee8aa;
    }
</style>
</head>
<body>
  <div>Maksimalna širina ovog div elementa postavljena je na 200px, pa ne može biti šira od toga.</div>
  <p>Unesite neki tekst da biste vidjeli kako to radi.</p>
</body>
</html>

Isto tako, element koji ima primijenjenu max-height nikada neće biti viši od navedene vrijednosti, čak i ako je svojstvo height postavljeno na nešto veće. Na primjer, ako je visina postavljena na 200px, a maksimalna visina postavljena na 100px, stvarna visina elementa biće 100px. 

div {
    height: 200px;
    max-height: 100px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje maksimalne visinu elementa</title>
<style>   
    div {
        height: 200px;
        max-height: 100px;
        background: #bbb3ff;
    }
    p {
        max-height: 100px;
        background: #eee8aa;
    }     
</style>
</head>
<body> 
  <div>Maksimalna visina ovog div elementa postavljena je na 100px, pa ne može biti viša od toga.</div>
  <p>Unesite još redova teksta da vidite kako funkcioniše.</p>   
</body>
</html>

Postavljanje minimalne širine i visine

Možete koristiti svojstvo min-width i min-height da odredite minimalnu širinu i visinu područja sadržaja. Ova minimalna širina i visina ne uključuju podloge, boreder ili margine (eng. paddings, borders or margins). Element ne može biti uži od vrijednosti min-width, čak i ako je vrijednost svojstva width postavljena na nešto manje. Na primjer, ako je širina postavljena na 300px, a minimalna širina postavljena na 400px, stvarna širina elementa biće 400px. Pogledajmo kako to zapravo radi: 

div {
    width: 200px;
    min-width: 300px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje minimalne širine elementa</title>
<style>
    div {
        width: 200px;
        min-width: 300px;
        background: #bbb3ff;
    }     
    p {
        float: left;
        min-width: 400px;
        background: #eee8aa;
    }
</style>
</head>
<body>
  <div>Minimalna širina ovog div elementa postavljena je na 300px, pa ne može biti uži od toga.</div>
  <p>Unesite još tekst da biste vidjeli kako radi.</p>
</body>
</html>

Slično tome, element na koji se primjenjuje min-height nikada neće biti manji od navedene vrijednosti, čak i ako je svojstvo visine postavljeno na nešto manje. Na primjer, ako je height postavljena na 200px, a min-height postavljena na 300px, stvarna visina elementa biće 300px. 

div {
    height: 100px;
    min-height: 200px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje minimalne visine elementa</title>
<style>
    div {        
        height: 200px;
        min-height: 300px;
        background: #bbb3ff;
    }
    p {
        min-height: 100px;
        background: #eee8aa;
    }
</style>
</head>
<body> 
  <div>Minimalna visina ovog div elementa postavljena je na 300px, tako da ne može biti manja od te.</div>
  <p>Unesite još redova teksta da vidite kako funkcioniše.</p>  
</body>
</html>

Postavljanje raspona širine i visine (Width and Height Range)

Svojstva min-width i min-height često se koriste u kombinaciji sa svojstvima max-width i max-height za stvaranje raspona širine i visine za element. Ovo može biti vrlo korisno za stvaranje fleksibilnog dizajna. U sljedećem primjeru minimalna širina elementa <div> bila bi 300px, a može se protezati vodoravno do maksimalnih 500px. 

div {
    min-width: 300px;
    max-width: 500px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje opsega širine za element</title>
<style>
    div {
        float: left;
        min-width: 300px;
        max-width: 500px;
        height: 100px;
        background: #eee8aa;
    }
</style>
</head>
<body> 
    <p><strong>Napomena:</strong> Minimalna širina sljedećeg 
    div elementa bit će 300px, a može se protezati vodoravno do 
    500px. Unesite nekoliko redova teksta unutar elementa div da biste 
    razumjeli kako funkcioniše.</p>
  <div></div> 
</body>
</html>

Slično tome, možete definisati raspon visine za element. U primjeru ispod minimalna visina elementa <div> bila bi 300px, a može se vertikalno protezati do maksimalnih 500px. 

div {
    min-height: 300px;
    max-height: 500px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Postavljanje raspona visine za element</title>
<style>
    div {
        min-height: 300px;
        max-height: 500px;
        background: #eee8aa;
    }
</style>
</head>
<body> 
    <p><strong>Napomena:</strong> Minimalna visina sljedećeg
    div elementa biće 300px, a može se vertikalno protezati do 500px.
    Unesite nekoliko redova teksta unutar elementa div da biste 
    razumjeli kako funkcioniše.</p>
  <div></div> 
</body>
</html>