Bảng lịch

Sách tham khảo CSS

Thuộc tính CSS

Khóa học tự chọn

Khuyến nghị khóa học:

Bộ công cụ CodeW3C.com

Thuộc tính margin-inline CSS

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

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

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

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

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

margin-inline: 10px 50px;

Khoảng cách bên ngoài khi bắt đầu là 10px
Khoảng cách bên ngoài khi kết thúc là 50px

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

margin-inline: 10px;

Biên ngoài bắt đầu và kết thúc đều là 10px

CSS margin-inline và margin-block Thuộc tính tương ứng với margin-top,margin-bottom,margin-left và margin-right Cả hai thuộc tính này rất tương tự, nhưng margin-inline và margin-block Thuộc tính phụ thuộc vào hướng khối và hướng trong hàng.

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

Mô hình

Ví dụ 1

Đặt khoảng cách biên bên ngoài theo hướng hàng:

div {
  margin-inline: 35px;
}

Thử nghiệm ngay

Ví dụ 2

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

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

Thử nghiệm ngay

Ví dụ 3

Khi thuộc tính của phần tử <div> direction Khi giá trị thuộc tính được thiết lập thành 'rtl', hướng hàng từ phải sang trái. Kết quả là vị trí bắt đầu của phần tử di chuyển từ bên trái sang bên phải, vị trí kết thúc di chuyển từ bên phải sang bên trái:

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

Thử nghiệm ngay

Cú pháp CSS

margin-inline: 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 của phần tử.
length	Định nghĩa margin-inline bằng đơn vị px, pt, cm, v.v. Cho phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Định nghĩa phần trăm kích thước margin-inline 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	Giãn 属性 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 hoạt hình:	Hỗ trợ. Xem thêm:Các thuộc tính liên quan đến hoạt hình.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.marginInline="50px 10px"