CSS - Box Model

Šta je Box Model?

Svaki element koji se može prikazati na web stranici sastoji se od jednog ili više pravouglih okvira. CSS box model obično opisuje kao pravougaoni okviri postavljeni na web stranici. Ovi okviri mogu imati različita svojstva i mogu međusobno komunicirati na različite načine, ali svaki okvir ima content area i padding, border, i margin areas. Sljedeći dijagram pokazuje kako CSS svojstva width, height, padding, border i margin određuju koliko prostora element može zauzeti na web stranici.





Padding je prozirni prostor između sadržaja elementa i njegove granice (border) (ili ivice okvira, ako nema granica), dok je margina prozirni prostor oko granice (border). Takođe, ako element ima boju pozadine, biće vidljiv kroz njegovo područje popunjavanja. Područje margine uvijek ostaje prozirno, na njega ne utiče boja pozadine elementa, međutim uzrokuje da se kroz njega vidi boja pozadine nadređenog elementa.


Širina (Width) i visina (Height) elemenata

Obično kada postavljate širinu i visinu elementa koristite CSS svojstva width i height, u stvarnosti postavljate samo širinu i visinu područja sadržaja tog elementa. Stvarna širina i visina box-sa elementa zavisno o nekoliko svojstava. Stvarni prostor koji bi okvir elementa mogao zauzeti na web stranici izračunava se ovako:

Box Size CSS Properties
Total Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

O svakom od ovih CSS svojstava detaljno ćete naučiti u narednim lekcijama. Sada isprobajte sljedeći primjer da biste razumjeli kako zapravo funkcioniše box model: 

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* postavi padding na sve četiri strane */
    border: 10px solid black; /* postavi border na sve četiri strane */
    margin: 20px auto; /* postavi gornju i donju marginu na 20 piksela, a lijevi i desnu na auto (automacki) */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Model formatiranja CSS okvira</title>
<style>
    div {
    width: 300px;
    height: 200px;
    padding: 15px;
    border: 10px solid black;
    margin: 20px auto;
}
</style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum 
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
    eu, tristique eget.</div>
</body>
</html>