- Trang chủ
- Tham khảo
- CSS
- Thuộc tính top
Định nghĩa và sử dụng
Thuộc tính top được dùng để định vị trí bên trên (top) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trên ngoài cùng của thành phần bao ngoài.
Chú ý: thuộc tính top sẽ không có tác dụng khi position có giá trị là static
Cấu trúc
Với giá trị như sau:
top | Khoảng cách | top: 20px; | Khoảng cách tính từ mép trên ngoài cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ... |
auto | top: auto; | Khoảng cách tự động (các trình duyệt sẽ có cách tính khoảng cách khác nhau), đây là mặc định của thuộc tính top. | |
inherit | top: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
Mô tả
<html> <head></head> <body> <div> <p>Đây là tag p có vị trí bên trên (top)</p> </div> </body> </html>
top
Khoảng cách
div { border: 1px solid #ff0000; height: 100px; position: relative; } div p { position: absolute; }
top: 20px;
Khoảng cách tính từ mép trên ngoài cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ...
auto
div { border: 1px solid #ff0000; height: 100px; position: relative; } div p { position: absolute; top: 30px; }
top: auto;
Khoảng cách tính từ mép trên ngoài cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ...
auto
top: auto;
Khoảng cách tự động (các trình duyệt sẽ có cách tính khoảng cách khác nhau), đây là mặc định của thuộc tính top.
inherit
length
- Chỉ định khoảng cách lề phía trên của phần tử bởi một giá trị cụ thể.border-top dùng để thiết lập đường viền cạnh phía trên của phần tử HTML, bao gồm việc xác định:
- (giá trị này có thể được xác định theo đơn vị px, em, cm)
- percent
- - Chỉ định khoảng cách lề phía trên 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.border-top là cú pháp viết tắt của ba thuộc tính:
- border-top-width
- border-top-style
- border-top-color
Nếu thiết lập thuộc tính margin-top cho phần tử B với giá trị 50% thì khoảng cách lề phía trên của phần tử B sẽ là 100px.
Nếu thiết lập thuộc tính margin-top cho phần tử B với giá trị 20% thì khoảng cách lề phía trên của phần tử B sẽ là 40px.border-top, ta dùng cú pháp như sau:
border-top: width style color|initial|inherit;. . . .border-top có thể được xác định bởi một trong ba loại:
initial | - Sử dụng giá trị mặc định của nó. inherit - Kế thừa giá trị thuộc tính margin-top từ phần tử cha của nó. 1) Thuộc tính border-top trong CSS
| Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. inherit | Xem ví dụ |
inherit | - Kế thừa giá trị thuộc tính margin-top từ phần tử cha của nó. | Xem ví dụ |
length
- Chỉ định khoảng cách lề phía trên 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ề phía trên 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.
Nếu thiết lập thuộc tính margin-top cho phần tử B với giá trị 50% thì khoảng cách lề phía trên của phần tử B sẽ là 100px.
Nếu thiết lập thuộc tính margin-top cho phần tử B với giá trị 20% thì khoảng cách lề phía trên của phần tử B sẽ là 40px.
. . . .margin-top dùng để xác định khoảng cách "lề phía trên" của phần tử HTML.
- Xác định khoảng cách lề phía trên của phần tử HTML có nền màu vàng.
margin-top: 0px; 50px; 100px; 150px; 200px; |
3) Cách sử dụng thuộc tính margin-top trong CSS
- Để sử dụng thuộc tính margin-top, ta dùng cú pháp như sau:margin-top, ta dùng cú pháp như sau:
margin-top: auto|length|percent|initial|inherit;- Trong đó, ta thấy giá trị của thuộc tính margin-top có thể được xác định bởi một trong năm loại:margin-top 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ề phía trên của phần tử. | Xem ví dụ |
length | - Chỉ định khoảng cách lề phía trên 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ề phía trên 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-top từ phần tử cha của nó. | Xem ví dụ |