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:
<html>
<head>
<title>Scrierea textelor cu HTML si CSS</title>
</head>
<body>
<h1>Titlul paginii</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, <span style="color:red">dapibus sed metus</span>. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
<blockquote>Donec ut ipsum nulla, et adipiscing tortor. Donec cursus dapibus dolor sit amet molestie. Etiam rutrum viverra arcu sed pharetra. Ut velit felis, rutrum dapibus tempor ac, dictum vel magna. Fusce lacinia dictum tellus eget sagittis. Praesent sit amet tortor lectus, vitae pulvinar velit. Sed ut sollicitudin ante.</blockquote>
<h2>Subtitlu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
</body>
</html>
Ceea ce vezi este de fapt o insiruire de cutii…
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.
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:
<html>
<head>
<title>Scrierea textelor cu HTML si CSS</title>
<style type="text/css" rel="stylesheet">
h1
{
color: #fff;
background-color: #45e200;
padding: 20px;
border: 10px dotted darkred;
margin:0;
}
p
{
background-color: #319df8;
width: 300px;
padding: 30px;
border: 10px solid lime;
margin: 30px;
}
</style>
</head>
<body>
<h1>Titlul paginii</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, <span style="color:red">dapibus sed metus</span>. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
</body>
</html>
Rezultatul va fi…
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…
