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

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

定义和用法

margin-inline-start 属性指定行内方向起始端的外边距。

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

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

Mô hình

Ví dụ 1

Đặt margin cho điểm bắt đầu hướng in-line:

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

Thử nghiệm trực tiếp

Ví dụ 2

Khi thuộc tính của phần tử <div> là writing-mode Khi giá trị thuộc tính được thiết lập thành 'vertical-rl', hướng in-line là từ dưới lên. Kết quả là điểm bắt đầu của phần tử sẽ di chuyển từ bên trái lên trên:

div {
  margin-inline-start: 50px;
  writing-mode: vertical-rl;
}

Thử nghiệm trực tiếp

Ví dụ 3

Khi thuộc tính của phần tử <div> là direction Khi giá trị thuộc tính được thiết lập thành 'rtl', hướng in-line là từ phải sang trái. Kết quả là điểm bắt đầu của phần tử vẫn bắt đầu từ bên trái về視觉, nhưng vì hướng là từ phải sang trái, nên hiệu ứng布局 thực tế sẽ khác biệt:

div {
  margin-inline-start: 50px;
  direction: rtl;
}

Thử nghiệm trực tiếp

Ngôn ngữ CSS

margin-inline-start: 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-inline-start của phần tử.
length	Đặt margin-inline-start bằng các đơn vị như px, pt, cm. Cho phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt margin-inline-start bằng phần trăm kích thước của phần tử cha theo hướng in-line.
initial	Đặt thuộc tính này thành giá trị mặc định. Xem thêm initial.
inherit	Từ thuộc tính cha của nó kế thừa thuộc tính này. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Di truyền:	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.marginInlineStart="50px"