Modelul cutie in CSS - Box model
CSS Tutorial » Modelul cutie in CSS
Fiecare element care poate fi afișat pe o pagină web este alcătuit din una sau mai multe casete dreptunghiulare.
Modelul de casetă CSS descrie de obicei modul în care aceste cutii dreptunghiulare sunt așezate pe o pagină web. Aceste casete pot avea proprietăți diferite și pot interacționa între ele în moduri diferite, dar fiecare casetă are o zonă de conținut și zone opționale de umplere, marginea și chenarul înconjurătoare.
Căptușeala este spațiul transparent între conținutul elementului și marginea acestuia (sau marginea casetei, dacă nu are chenar), în timp ce marginea este spațiul transparent din jurul chenarului.
De asemenea, dacă un element are culoarea de fundal, acesta va fi vizibil prin zona de umplere. Zona de margine rămâne întotdeauna transparentă, nu este afectată de culoarea de fundal a elementului, totuși face ca culoarea de fundal a elementului părinte să fie afișată.
Lățimea și înălțimea cutiei div in CSS
Pentru a seta corect lățimea și înălțimea unui element în toate browserele, trebuie să știți cum funcționează modelul casetei.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Model CSS format cutie</title>
<style>
div {
width: 320px;
height: 210px;
padding: 15px;
border: 6px solid green;
margin: 20px auto;
}
</style>
</head>
<body>
<div>
<h2>Stil pentru cutie div</h2>
<p><style><br>
div {<br>
width: 320px;<br>
height: 210px;<br>
padding: 15px;<br>
border: 6px solid green;<br>
margin: 20px auto;<br>
}<br>
</style></p>
</div>
</body>
</html>
Etichete: modelul cutiei CSS, ce este, modelul cutiei tradiționale CSS, cutia containerului, schimbarea modelului cutiei CSS
Proprietatea CSS padding
Proprietățile CSS padding vă permit să setați spațiul dintre conținutul unui element și marginea acestuia (sau marginea casetei elementului, dacă nu are un chenar definit).
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 4px solid green;
background-color: #93FFC9;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 40px;
padding-left: 30px;
}
</style>
</head>
<body><h2>Utilizați proprietăți individuale de umplere padding</h2>
<div>Acest element div are un padding superior de 20 px,
o umplere dreaptă de 10 px, o umplutură inferioară de 40 px și a
30 px stânga umplere. - Acest element div are un padding
20 px sus, 10 px umplere dreapta, o umplere
0 px jos și 30 px umplere la stânga.
- Acest element div are un padding superioară de 20
px, o umplutură dreaptă de 10 px, o umplutură de jos de
40 px și 30 px de umplere la stânga.</div></body>
</html>
Setați margini pentru fiecare parte
Puteți specifica margini pentru fețele individuale ale unui element, cum ar fi părțile de sus, dreapta, jos și stânga, utilizând proprietățile CSS margin-top, margin-right, margin-bottom și margin-left, respectiv.
Să încercăm următorul exemplu pentru a înțelege cum funcționează:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid red;
margin-top: 24px;
margin-bottom: 10px;
margin-right: 50px;
margin-left: 180px;
background-color: lightblue;
}
</style>
</head>
<body><h2>Usar propiedades de margen individuales</h2>
<div>Acest element div are o marjă superioară de 24 px,
o marjă dreaptă de 50 px, o marjă inferioară de 10 px și a
Marja stângă de 180 px. - Acest element div are un
24 px marja superioară, 50 px marja dreaptă,
o marjă de jos de 10 px și o margine de stânga de 180 px.</div></body>
</html>
margin si padding box CSS
diagramă model cutie
exemple de modele cutie css
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.