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.