- Trang chủ
- Tham khảo
- CSS
- Thuộc tính bottom
Định nghĩa và sử dụng
Thuộc tính bottom được dùng để định vị trí dưới [bottom] 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 dưới cùng của thành phần bao ngoài.
Chú ý: thuộc tính bottom 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:
bottom | Khoảng cách | bottom: 20px; | Khoảng cách tính từ mép dưới cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ... |
auto | bottom: 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 bottom. | |
inherit | bottom: 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ả
Đây là tag p có vị trí dưới [bottom]
bottom
Khoảng cách
div { border: 1px solid #ccc; height: 100px; position: relative; } div p { position: absolute; }
bottom: 20px;
Khoảng cách tính từ mép dưới cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ...
auto
div { border: 1px solid #ccc; height: 100px; position: relative; } div p { position: absolute; bottom: 10px; }
bottom: auto;
Khoảng cách tính từ mép dưới cùng của thành phần bao ngoài, đơn vị có thể là px, em, %, ...
auto
bottom: 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 bottom.
inherit
initial bottom trong CSS thường được dùng để thiết lập khoảng cách từ lề dưới của phần tử con đến lề dưới của phần tử cha
- Sử dụng giá trị mặc định của nó.
[mặc định cạnh phía dưới của phần tử không được hiển thị]bottom chỉ thường được sử dụng để kết hợp với thuộc tính position [giá trị absolute]
inherit
#parent{
border:10px solid black;
height:300px;
position:relative;
}
#child{
border:10px solid red;
position:absolute;
bottom:100px;
}
Lề dưới của phần tử này sẽ cách lề dưới của
phần tử cha của nó một khoảng là 100px
- Kế thừa giá trị thuộc tính border-bottom từ phần tử cha của nó.
Thuộc tính bottom trong CSS thường được dùng để thiết lập khoảng cách từ lề dưới của phần tử con đến lề dưới của phần tử cha
Minh họa:
bottom: auto | length | percentage | initial | inherit;
Lưu ý: Thuộc tính bottom chỉ thường được sử dụng để kết hợp với thuộc tính position [giá trị absolute]
Thuộc tính bottom trong CSS thường được dùng để thiết lập khoảng cách từ lề dưới của phần tử con đến lề dưới của phần tử cha | Minh họa: | Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. | Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. | Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. | |
initial | - Sử dụng giá trị mặc định của nó. |
[mặc định cạnh phía dưới của phần tử không được hiển thị]
inherit
- Kế thừa giá trị thuộc tính border-bottom từ phần tử cha của nó.
Thuộc tính bottom trong CSS thường được dùng để thiết lập khoảng cách từ lề dưới của phần tử con đến lề dưới của phần tử cha
Minh họa:
initial
- Sử dụng giá trị mặc định của nó.border-bottom dùng để thiết lập đường viền cạnh phía dưới của phần tử HTML, bao gồm việc xác định:
- Độ dày của đường viền.
- Kiểu của đường viền.
- Màu của đường viền.
- Hay nói cách khác, thuộc tính border-bottom là cú pháp viết tắt của ba thuộc tính:border-bottom là cú pháp viết tắt của ba thuộc tính:
- border-bottom-width
- border-bottom-style
- border-bottom-color
2] Cách sử dụng thuộc tính border-bottom trong CSS
- Để sử dụng thuộc tính border-bottom, ta dùng cú pháp như sau:border-bottom, ta dùng cú pháp như sau:
border-bottom: width style color|initial|inherit;
- Trong đó, ta thấy giá trị thuộc tính border-bottom có thể được xác định bởi một trong ba loại:border-bottom có thể được xác định bởi một trong ba loại:
width style color | - Giá trị "width" xác định độ dày đường viền cạnh phía dưới. - Giá trị "style" xác định kiểu đường viền cạnh phía dưới - Giá trị "color" xác định màu đường viền cạnh phía dưới. - Lưu ý: Đối với loại bộ ba giá trị này, ta không nhất thiết phải cung cấp đủ ba giá trị, những giá trị nào thiếu sẽ tự động sử dụng giá trị mặc định của nó, ví dụ:
| Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. [mặc định cạnh phía dưới của phần tử không được hiển thị] | Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. | Xem ví dụ |