Thuộc Tính Margin Trong CSS - Web Cơ Bản
Có thể bạn quan tâm
- HTML
- CSS
- JAVASCRIPT
- JQUERY
- MYSQL
- PHP
1) Nhắc lại "các thành phần của một phần tử"
- Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:
- margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
- border (đường viền của phần tử)
- padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
- content (nội dung của phần tử)
- Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.
margin border padding content2) Thuộc tính margin trong CSS
- Thuộc tính margin dùng để xác định khoảng cách lề của phần tử HTML.
Ví dụ:- Xác định khoảng cách lề của phần tử HTML có nền màu vàng.
margin: 0px; 25px; 50px; 75px; 100px; |
3) Cách sử dụng thuộc tính margin trong CSS
- Để sử dụng thuộc tính margin, ta dùng cú pháp như sau:
margin: auto|length|percent|initial|inherit;- Trong đó, ta thấy giá trị của thuộc tính margin có thể được xác định bởi một trong năm loại:
auto | - Trình duyệt sẽ tự động xác định khoảng cách lề của phần tử. | Xem ví dụ |
length | - Chỉ định khoảng cách lề của phần tử bởi một giá trị cụ thể. (giá trị này có thể được xác định theo đơn vị px, em, cm) | |
percent | - Chỉ định khoảng cách lề của phần tử dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử chứa nó. - Ví dụ: Ta có một phần tử A dùng để chứa phần tử B, phần nội dung của phần tử A có chiều rộng là 200px.
| |
initial | - Sử dụng giá trị mặc định của nó. | |
inherit | - Kế thừa giá trị thuộc tính margin từ phần tử cha của nó. | Xem ví dụ |
4) Xác định khoảng cách lề ở từng vị trí
- Khi chúng ta sử dụng thuộc tính margin với cú pháp ở phần hướng dẫn phía trên thì mặc định khoảng cách lề ở cả bốn vị trí của phần tử sẽ có chung một giá trị.
- Tuy nhiên, nếu muốn khoảng cách lề ở mỗi vị trí của phần tử có một giá trị riêng biệt (giống phần tử có nền màu vàng bên dưới), thì ta phải làm như thế nào !?
- Để xác định khoảng cách lề ở từng vị trí thì ta có một số cú pháp như sau:
4.1) Cú pháp 1
margin: value1 value2 value3 value4;- Lề phía trên của phần tử sẽ có khoảng cách là value1
- Lề bên phải của phần tử sẽ có khoảng cách là value2
- Lề phía dưới của phần tử sẽ có khoảng cách là value3
- Lề bên trái của phần tử sẽ có khoảng cách là value4
4.2) Cú pháp 2
margin: value1 value2 value3;- Lề phía trên của phần tử sẽ có khoảng cách là value1
- Lề bên trái & bên phải của phần tử sẽ có khoảng cách là value2
- Lề phía dưới của phần tử sẽ có khoảng cách là value3
4.3) Cú pháp 3
margin: value1 value2;- Lề phía trên & phía dưới của phần tử sẽ có khoảng cách là value1
- Lề bên trái & bên phải của phần tử sẽ có khoảng cách là value2
Từ khóa » Trong Css Cú Pháp Margin 4px 3px 5px 3px Có Nghĩa Là
-
Thuộc Tính Margin | CSS | Học Web Chuẩn
-
Lề Trong CSS - Margin
-
Thuộc Tính Margin Và Padding Trong CSS
-
Tất Tần Tật Về MARGIN Trong CSS - NIIT - ICT Hà Nội
-
5 Cách Viết Tắt Thường Dùng Trong CSS - Express Magazine
-
Ý Nghĩa Của Thẻ Margin Và Padding Trong Css - Blog Thủ Thuật, Mẹo Vặt
-
Thi Trắc Nghiệm | Trung Tâm Tin Học - VITC VNUA
-
Thi Trắc Nghiệm | Trung Tâm Tin Học - VITC VNUA
-
[PDF] Bài 3 - CSS – Casscading Style Sheets - Soict
-
Thuộc Tính Margin Trong CSS - Hoclaptrinh
-
Bài Giảng - Giáo án: Các Bài Học Về CSS Trong Lập Trình Website
-
(PDF) Các Bài Học Về CSS Contents
-
Báo Cáo CSS - Tài Liệu, Luận Văn
-
Tìm Hiểu Margin Và Padding - Thủ Thuật Blog Violet