Thuộc tính CSS margin-block

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

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

margin-block Thuộc tính này xác định khoảng cách bên ngoài của cạnh bắt đầu và kết thúc theo hướng khối, là viết tắt của các thuộc tính sau:

margin-block-start
margin-block-end

margin-block Giá trị của thuộc tính có thể được thiết lập bằng nhiều cách:

Nếu thuộc tính margin-block có hai giá trị:

margin-block: 10px 50px;

Khoảng cách bên ngoài của cạnh bắt đầu là 10px
Vị trí cạnh kết thúc của cạnh ngoài là 50px

Nếu thuộc tính margin-block có một giá trị:

margin-block: 10px;

Vị trí cạnh bắt đầu và kết thúc của cạnh ngoài đều là 10px

CSS của margin-block và margin-inline Thuộc tính tương ứng với CSS của margin-top,margin-bottom,margin-left và margin-right Cực kỳ tương 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 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 margin hai bên theo hướng khối.

div {
  margin-block: 35px;
}

Thử nghiệm trực tiếp

Ví dụ 2

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

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
auto	Giá trị mặc định. Giá trị mặc định của margin-block của phần tử.
length	Đặt margin-block bằng px, pt, cm v.v. Cho phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt margin-block tương đối 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 thành giá trị mặc định. Xem thêm initial.
inherit	Thực hiện kế thừa thuộc tính này 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.marginBlock="50px 20px"