Modelul de Cutie CSS
Când vorbești despre design și layout în CSS, apare repede termenul model de cutie.
El descrie o cutie care înfășoară fiecare element HTML, formată din patru părți: conținut, spațiere interioară (padding), bordură și margine.
- Conținut — conține textul și imaginile.
- Spațiere interioară — o zonă transparentă eliberată în jurul conținutului.
- Bordură — înconjoară atât spațierea interioară, cât și conținutul.
- Margine — o zonă transparentă eliberată dincolo de bordură.
Datorită acestui model, putem pune o bordură în jurul elementelor și putem controla spațiul dintre ele.
Exemplu
Fiecare parte a cutiei se vede pe acest div, care are o lățime, o bordură verde, spațiere interioară și o margine.
<style>, dă unui <div> lățime 300px, o bordură solidă verde de 15px, spațiere interioară de 50px și margine de 20px. Adaugă o culoare de fundal astfel încât zona de conținut să fie vizibilă. Pune text în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is a box that wraps around every HTML element. It has content, padding, a border, and a margin.</p>
<div>This text is the content of the box. The padding, border, and margin sit around it.</div>
</body>
</html>
Lățimea și Înălțimea unui Element
Ca să setezi corect lățimea și înălțimea în toate browserele, trebuie să înțelegi modelul de cutie.
Important: Proprietățile width și height stabilesc doar dimensiunea zonei de conținut. Spațierea interioară și bordurile vin peste ea, așa că le adaugi ca să afli dimensiunea totală.
Lățimea totală = lățime + spațierea interioară din stânga și din dreapta + bordura din stânga și din dreapta.
Înălțimea totală = înălțime + spațierea interioară de sus și de jos + bordura de sus și de jos.
Notă: Dimensiunea cutiei se oprește la bordură. Marginea nu face parte din această dimensiune, deși se adaugă la spațiul pe care cutia îl ocupă pe pagină.
Exemplu
Pornește de la o lățime de 320px cu spațiere interioară de 10px și o bordură de 5px: rezultatul este o lățime totală de 350px și o înălțime totală de 80px.
<style>, dă unui <div> lățime 320px, înălțime 50px, spațiere interioară 10px, o bordură solidă gri de 5px și margine 0. Lățimea totală devine 350px, iar înălțimea totală 80px. Pune text în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<div>The total width is 350px and the total height is 80px.</div>
</body>
</html>