Înălțime și Lățime în CSS
Înălțimea și lățimea unui element se setează cu proprietățile CSS height și width.
Exemplu
Aici, elementul are o înălțime de 70 de pixeli și o lățime de 100%.
Prompt
O pagină HTML care afișează un element cu o înălțime fixă și o lățime procentuală.
Într-un bloc
<style> intern, dați unui <div> o înălțime de 70px, o lățime de 100% și o culoare de fundal pentru ca dimensiunea să fie vizibilă. Puneți text în interior.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 70px;
width: 100%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 70 pixels and a width of 100%.</div>
</body>
</html>
Setarea Înălțimii și Lățimii în CSS
Când dimensionezi un element cu height și width, padding-ul, bordurile și marginile nu sunt incluse. Aceste proprietăți măsoară zona din interiorul padding-ului, bordurii și marginii.
Valorile Proprietăților height și width în CSS
height și width acceptă cinci tipuri de valori:
auto— browserul calculează dimensiunea; aceasta este valoarea implicită.- o lungime — o dimensiune dată în
px,cm,emși așa mai departe. - un procent — o dimensiune relativă la blocul care conține elementul.
initial— readuce dimensiunea la valoarea implicită.inherit— copiază dimensiunea de la elementul părinte.
Exemple pentru height și width în CSS
Notă: Padding-ul, bordurile și marginile rămân în afara dimensiunii definite de height și width, deoarece aceste proprietăți acoperă doar zona din interiorul lor.
Înălțime 200px, lățime 50%
Cu o înălțime de 200px, acest div ocupă jumătate din lățimea containerului său.
Prompt
O pagină HTML care setează o înălțime fixă și o lățime procentuală pentru un element.
Într-un bloc
<style> intern, dați unui <div> o înălțime de 200px, o lățime de 50% și un fundal powderblue. Puneți text în interior.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 200 pixels and a width of 50%.</div>
</body>
</html>
Înălțime 100px, lățime 500px
De data aceasta, o dimensiune fixă: 100px înălțime și 500px lățime.
Prompt
O pagină HTML care setează o înălțime fixă și o lățime fixă în pixeli pentru un element.
Într-un bloc
<style> intern, dați unui <div> o înălțime de 100px, o lățime de 500px și un fundal powderblue. Puneți text în interior.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 100 pixels and a width of 500 pixels.</div>
</body>
</html>