Hướng dẫn bottom trong css - bottom in css

• 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:

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

   


   

      
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)

(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: