Thuộc tính CSS margin-block-end

Trang trước margin-block
Trang tiếp theo margin-block-start

Định nghĩa và cách sử dụng

margin-block-end Thuộc tính chỉ định khoảng cách kết thúc hướng khối.

Thuộc tính của CSS margin-block và margin-inline Thuộc tính tương ứng với thuộc tính của CSS margin-top,margin-bottom,margin-left và margin-right Thuộc tính rất相似, nhưng margin-block và margin-inline Thuộc tính phụ thuộc vào hướng khối và hướng hàng.

Lưu ý:Thuộc tính CSS liên quan writing-mode Định nghĩa hướng khối. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của khối cũng như margin-block-end Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là xuống, hướng hàng là từ trái sang phải.

Mô hình

Ví dụ 1

Đặt khoảng cách biên khối khi kết thúc khối:

div {
  margin-block-end: 35px;
}

Thử ngay

Ví dụ 2

Khi phần tử <div> có writing-mode Khi thuộc tính được thiết lập là vertical-rl, hướng khối là từ phải sang trái. Kết quả là vị trí kết thúc của phần tử di chuyển từ dưới lên bên trái. Do đó, sự thay đổi của writing-mode cũng ảnh hưởng đến hiệu ứng của margin-block-end:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-end: 50px;
}

Thử ngay

Ngôn ngữ CSS

margin-block-end: auto|length|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
auto	Giá trị mặc định. Độ cách biên mặc định của phần tử.
length	Định nghĩa khoảng cách, đơn vị là px, pt, cm, v.v. Cho phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Định nghĩa khoảng cách phần trăm so với kích thước của phần tử cha theo hướng hàng.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngôn ngữ lập trình JavaScript:	object.style.marginBlockEnd="20px"