Thuộc tính height trong CSS
Trần Ngọc Thanh - 657
- 12/07/2025
Thuộc tính height trong CSS dùng để quy định chiều cao của các phần tử HTML như thẻ div, p, img,... bằng đơn vị px, phần trăm, auto, vh, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính height trong CSS
Thuộc tính height trong CSS dùng để quy định chiều cao của các phần tử HTML như thẻ div, p, img,... bằng đơn vị px, phần trăm, auto, vh (chiều cao màn hình trình duyệt).
Cú pháp của Thuộc tính height trong CSS
height: giatri;
giatri: Giá trị để quy định chiều cao của phần tử HTML (Ví dụ: 100px, 80%, 100vh, auto,....)
Ý nghĩa của các đơn vị trong giá trị:
px: Quy định chiều cao của phần tử HTML bằng đơn vị px.
%: Quy định chiều cao của phần tử HTML bằng đơn vị % so với phần tử cha.
vh: Quy định chiều cao của phần tử HTML so với chiều cao màn hình trình duyệt, 80vh là 80% so với chiều cao màn hình trình duyệt.
auto: Chiều cao sẽ tự động co giãn theo nội dung trong phần tử HTML.
Ví dụ Thuộc tính height trong CSS
height:auto;
height:50px;
height:100px;
height:50%;
height:100%;
height:100vh (chiều cao màn hình trình duyệt)
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính height trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:24%; margin-right:1%; float:left;height:200px;border:1px solid red; margin-bottom:10px}
p{width:100%; margin:0px; padding:0px; background:green; color:#fff; padding:10px}
span {width:100%; float:left; height:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính height trong CSS</h1>
<span>Dùng để quy định chiều cao của các phần tử HTML như thẻ div, p, img,... bằng đơn vị px, phần trăm, auto, vh (chiều cao màn hình trình duyệt):
</span>
<div><p style="height:50px">height:50px</p></div>
<div><p style="height:100px">height:100px</p></div>
<div><p style="height:50%">height:50%</p></div>
<div><p style="height:100%">height:100%</p></div>
<div style="">
<p style="height:100vh">height:100vh (chiều cao màn hình trình duyệt)</p>
</div>
<div><p style="height:auto">height:auto</p></div>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính height trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
