CSS Padding
Proprietățile CSS padding creează spațiu în jurul conținutului unui element, în interiorul bordurii sale.
CSS vă permite să setați padding-ul pentru fiecare parte a unui element (sus, dreapta, jos, stânga), și există o proprietate prescurtată pentru a le seta pe toate deodată.
Exemplu
Acest element are 70px de padding pe fiecare parte.
Prompt
O pagină HTML care arată un element cu un padding mare în interiorul marginii sale.
Într-un bloc intern
<style>, dă unui <div> 70px de padding, un border și o culoare de fundal astfel încât spațiul din interiorul marginii să fie clar. Pune ceva text în interiorul div-ului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>
Padding - Laturi individuale
CSS are o proprietate pentru fiecare parte: padding-top, padding-right, padding-bottom și padding-left.
Toate proprietățile de padding pot lua aceste valori:
- o lungime — un padding în
px,pt,cmși așa mai departe. - un procent — un padding ca procent din lățimea elementului părinte.
inherit— padding-ul este preluat de la elementul părinte.
Notă: Valorile negative nu sunt permise.
Exemplu
Fiecare latură a div-ului primește un padding diferit.
Prompt
O pagină HTML care setează un padding diferit pe fiecare latură a unui element.
Într-un bloc intern
<style>, dă unui <div> padding-top 50px, padding-right 30px, padding-bottom 50px și padding-left 80px. Adaugă un border și un fundal astfel încât padding-ul să se vadă. Pune text în interior.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div has different padding on all four sides.</div>
</body>
</html>
Padding - Proprietate prescurtată
Pentru a scurta codul, puteți seta tot padding-ul într-o singură proprietate padding, care reprezintă padding-top, padding-right, padding-bottom și padding-left.
Numărul de valori schimbă laturile cărora li se aplică:
- Patru valori (
25px 50px 75px 100px): sus, dreapta, jos, stânga. - Trei valori (
25px 50px 75px): sus, apoi dreapta și stânga, apoi jos. - Două valori (
25px 50px): sus și jos, apoi dreapta și stânga. - O valoare (
25px): toate cele patru laturi.
Patru valori
Setează padding-ul de sus, dreapta, jos și stânga, în ordine.
Prompt
O pagină HTML care folosește prescurtarea padding cu patru valori.
Într-un bloc intern
<style>, dă unui <div> padding: 25px 50px 75px 100px (sus, dreapta, jos, stânga), plus un border și un fundal astfel încât padding-ul să se vadă. Pune text în interior.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px 100px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Four values: 25px top, 50px right, 75px bottom, 100px left.</div>
</body>
</html>
Trei valori
Setează sus, apoi dreapta și stânga, apoi jos.
Prompt
O pagină HTML care folosește prescurtarea padding cu trei valori.
Într-un bloc intern
<style>, dă unui <div> padding: 25px 50px 75px (sus, dreapta și stânga, jos), plus un border și un fundal astfel încât padding-ul să se vadă. Pune text în interior.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Three values: 25px top, 50px right and left, 75px bottom.</div>
</body>
</html>
Două valori
Setează sus și jos, apoi dreapta și stânga.
Prompt
O pagină HTML care folosește prescurtarea padding cu două valori.
Într-un bloc intern
<style>, dă unui <div> padding: 25px 50px (sus și jos, apoi dreapta și stânga), plus un border și un fundal astfel încât padding-ul să se vadă. Pune text în interior.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Two values: 25px top and bottom, 50px right and left.</div>
</body>
</html>
O valoare
Setează același padding pe toate cele patru laturi.
Prompt
O pagină HTML care folosește prescurtarea padding cu o singură valoare.
Într-un bloc intern
<style>, dă unui <div> padding: 25px (toate cele patru laturi), plus un border și un fundal astfel încât padding-ul să se vadă. Pune text în interior.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>One value: 25px on all four sides.</div>
</body>
</html>