Show
Định nghĩa và sử dụngThuộ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úcVới giá trị như sau:
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> topKhoả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, %, ... autodiv {
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:
- 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:
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 có thể được xác định bởi một trong ba loại:
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ể.
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.
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: - 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:
|
