Inainte de a incepe sa discutam despre elementele block si proprietatile lor, trebuie sa vorbim putin de box model.

Ne putem imagina ca fiecare element in pagina, fie ele block, inline sau altceva este un dreptunghi, un box.

In mijloc avem continutul, iar in jurul lui diverse zone care il inconjoara.

Ca sa vedem exact aceste zone care inconjoara continutul vom folosi un simplu <p> ce contine o propozitie.

Si pentru a vedea mai exact unde se termina elementul il vom decora cu o bordura subtire rosie. Vom vorbi despre aceasta proprietate mai in detaliu in viitor, dar momentan vom avea in pagina: 

<html>
    <head>
        <style>
            p {
                width: 300px;
                height: 100px;
                padding: 20px;
                border: 2px solid red;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <p>O propozitie simpla</p>
    </body>
</html>

Iar rezultatul va fi:

O propozitie simpla

Vom discuta pe larg fiecare regula mai tarziu, momentan vom preciza cum fiecare in parte ne ajuta sa delimitam zonele unui element block.

Primele reguli sunt lunginea si inaltimea: 

width: 300px;
height: 100px;

Cu aceste doua reguli noi precizam cat vrem sa ocupe regiunea in care noi avem continutul propriu-zis

Urmatoarea regiune pentru element este cea dintre bordura si continut. Aceasta se numeste padding.

Pentru a adauga padding acestui element am scris: 

padding: 20px;

Aceasta regula face ca textul sa se indeparteze de bordura rosie.

Padding-ul este spatiul din interiorul elementului oarecum. Este zona dintre bordura si continut.

Apoi dupa padding, urmatoarea zona este bordura. Ne putem gandi la bordura drept la granita unde elementul se opreste: 

border: 2px solid red;

Iar ultima regiune pentru un element block este marginea. Aceasta este zona din jurul elementului care impinge elementele vecine mai departe: 

margin: 50px;

Vedem ca toate elementele din jurul lui se indeparteaza de paragraf. Ne putem imagina o margine invizibila de 50px in jurul paragrafului.

Asadar, padding este marginea interioara iar margin este cea exterioara.

Cum arata modelul box

Pentru a vizualiza mai bine zonele unui element block, putem folosi urmatoarea imagine:

Continutul din paragraf este dreptunghiul din mijloc, cel cu albastru si vedem ca are dimensiunile de 500 cu 100, exact cat i-am setat noi.

In jurul lui avem zona cu verde de grosime 20px, aceea este padding-ul.

Apoi avem bordura, care in desen apare cu o linie continua ceea ce vrea sa ne spuna ca ea este granita elementului.

Iar margin este zona in exterior care va indeparta elementul nostru de alte elemente.

Acesta este modelul box in CSS.

Noi vom folosi aceste reguli de foarte multe ori si vom discuta de fiecare in parte in urmatoarele lectii, dar este important intai sa vedem unde anume este fiecare pozitionata in functie de continutul elementului.

Toate aceste proprietati defininesc nu numai dimensiunile elementului dar si cum interactioneaza cu elementele din jur.

< Înapoi Către exercițiu >