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

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

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

margin-block-start Thuộc tính xác định mép ngoài bắt đầu của 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 CSS margin-top,margin-bottom,margin-left và margin-right giống hệ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ư kết quả của thuộc tính margin-block-start. Đố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 mép ngoài bắt đầu của khối:

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

Thử ngay

Ví dụ 2

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

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

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
auto	Giá trị mặc định. Khoảng cách mặc định của phần tử về mép ngoài.
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 theo 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 thành giá trị mặc định. Xem thêm initial.
inherit	Thực thị từ giải phẩn cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Kế thừa:	Không
Tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.marginBlockStart="100px"