CSS Tutorial 03 – Modelul cutiei (box model)

Revelatia pe care trebuie sa o ai atunci cand ai de a face cu web design este urmatoarea: Totul este o cutie.

Gandeste-te ca intr-o pagina html toate elementele sunt de fapt niste cutii, rostul CSS-ului fiind sa aranjeze aceste cutii astfel incat informatia sa apara bine in economia paginii.

Daca avem urmatorul cod:

Ceea ce vezi este de fapt o insiruire de cutii…

box

Asadar, “everything is a box” sau, pe romaneste, totul este o insiruire de cutii (sau casete? nu prea stiu cum s-ar traduce cel mai bine in romana termenul de “box”…).

Prin urmare, “think inside the box… the box model”

In engleza, cand vorbesti despre design web, trebuie mereu sa ai in minte termenul “box model”.

In CSS, “modelul cutie” iti spune ca orice element HTML este de fapt o cutie care se defineste prin: margini (margin), borduri (border), umplutura (padding) si, bineinteles, continut (content).

Prin urmare cand ai un element <h1></h1>, continutul sau consta in ceea ce se afla intre tag-urile <h1> si </h1>. Trebuie sa iti imaginezi acest element ca fiind o cutie:

continutul, care are lungime si latime (width si height), este obiectul care se afla in cutie;

umplutura (padding) inseamna spatiul liber dintre continut (content) si cutia in sine; este precum acele bilute de polistiren care se afla in orice cutie in care sunt transportate obiectele;

bordura (border) este cutia in sine;

– de asemenea marginea (margin) este spatiul dintre cutii.

Ce contine un box?

Deci, avem width, height, padding, border si margin.

box-model2

Cand ne referim la elementul <h1>Acesta este un titlu</h1>, el are width, height, padding, border si margin. Nu exista dimensiuni standard pentru elementul <h1></h1>, fiecare browser afisand in felul sau propriu elementele html.

De aceea, cand vei defini un element in CSS, atunci cand te gandesti la dimensiunile elementului, va trebui sa iei in considerare ca lungimea acestuia nu consta doar in width si height, ci in width+padding+border+margin si respectiv height+padding+border+margin.

Intorcand-ne la pagina noastra si luand in considerare noile elemente invate, putem defini headingul 1 si paragrafele in felul urmator:

Rezultatul va fi…

box-model-cod

Dupa cum poti vedea, elementul <h1>Titlul paginii</h1> este o “cutie” care are un “continut” de culoare alba (color: #ffffff;) cu o “umplutura” in jurul ei de 20 de pixeli (padding: 20px;), “cartonul cutiei fiind de 10 pixeli (border: 10px dotted darkred;) si marginea fata de restul elementelor de 0 pixeli (margin:0;).

De asemenea, paragraful are o lungime de 300 pixeli (width: 300px;) are un padding de 30 de pixeli (padding: 30px;), o bordura de 10 pixeli de culoare verde (border: 10px solid lime;) si o margine fata de celelalte elemente de 30 de pixeli (margin: 30px;).

Box model si dimensiunea reala

Daca ai fost atent la ce am spus mai devreme, uitandu-te la paragraf iti vei da seama ca dimensiunea reala a acestui element – ma refer in acest caz la lungime – nu este de 300 de pixeli (width), ci de 300 pixeli (width) + 2×30 pixeli (padding la stanga si la dreapta elementului) + 2×10 pixeli (border la stanga si la dreapta) + 2×30 pixeli (margin la stanga si la dreapta) = 440 pixeli.

Sper ca ai avut o revelatie…

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

No spam? * Time limit is exhausted. Please reload CAPTCHA.