Thuộc tính Khoảng Cách và Kích Thước trong CSS
Trong bài học này, bạn sẽ tìm hiểu về các thuộc tính CSS dùng để quản lý khoảng cách và kích thước của phần tử. Chúng giúp điều chỉnh bố cục và không gian hiển thị trên trang web.
Khoảng Cách và Kích Thước trong CSS
1. Thuộc tính padding
- Mô tả: Xác định khoảng cách bên trong phần tử, từ nội dung đến đường viền (border).
-
Cú pháp:
div { padding: 10px; } -
Cách ghi:
-
Một giá trị: Áp dụng đều cho tất cả các phía.
padding: 20px; -
Hai giá trị: Giá trị đầu cho trên-dưới, giá trị thứ hai cho trái-phải.
padding: 20px 10px; -
Bốn giá trị: Lần lượt là trên, phải, dưới, trái.
padding: 20px 10px 15px 5px;
-
Một giá trị: Áp dụng đều cho tất cả các phía.
2. Thuộc tính margin
-
Mô tả: Xác định khoảng cách bên ngoài phần tử, từ đường viền đến phần tử khác.
-
Cú pháp:
div { margin: 10px; } -
Cách ghi: Tương tự
padding. -
Giá trị đặc biệt:
-
auto: Căn giữa phần tử theo chiều ngang.margin: 0 auto;
-
3. Kích thước (width, height)
- Mô tả: Xác định chiều rộng và chiều cao của phần tử.
-
Cú pháp:
div { width: 300px; height: 200px; }
4. Kích thước tối đa (max-width, max-height)
- Mô tả: Giới hạn kích thước tối đa của phần tử.
-
Cú pháp:
div { max-width: 500px; max-height: 300px; } -
Sử dụng:
- Hữu ích cho thiết kế giao diện đáp ứng (responsive design).
Thực hành
1. Yêu cầu
Tạo một trang HTML với các khối phần tử hiển thị các thuộc tính:
- Padding và margin được áp dụng theo nhiều cách khác nhau.
- Kích thước phần tử được xác định rõ ràng và có giới hạn tối đa.
2. Hướng dẫn
File HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Khoảng Cách và Kích Thước</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box padding-example">Padding Example</div>
<div class="box margin-example">Margin Example</div>
<div class="box size-example">Width & Height</div>
<div class="box max-size-example">Max-Width & Max-Height</div>
</body>
</html>
File CSS (styles.css):
/* Định dạng chung */
.box {
background-color: lightblue;
color: black;
text-align: center;
font-size: 18px;
margin: 10px auto;
padding: 10px;
}
/* Padding Example */
.padding-example {
padding: 20px 40px;
background-color: lightcoral;
}
/* Margin Example */
.margin-example {
margin: 20px 50px;
background-color: lightgreen;
}
/* Width & Height Example */
.size-example {
width: 300px;
height: 150px;
background-color: lightgoldenrodyellow;
}
/* Max-Width & Max-Height Example */
.max-size-example {
max-width: 400px;
max-height: 200px;
width: 100%;
height: auto;
background-color: lightpink;
}
Kết luận
Qua bài học này, bạn đã nắm được cách sử dụng các thuộc tính padding, margin, width, và max-width. Đây là những công cụ cơ bản nhưng cực kỳ quan trọng trong việc bố trí và căn chỉnh các phần tử trên giao diện web.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com