Margin-inline - Thủ thuật CSS

margin-inlinelà một thuộc tính viết tắt trong CSS đặt giá trị margin-inline-startvà của một phần tử margin-inline-end, cả hai đều là thuộc tính logic. Nó tạo ra không gian xung quanh các yếu tố theo hướng inline, được xác định bởi các yếu tố của writing-mode, directionvà text-orientation.

Thuộc tính này là một phần của đặc tả Giá trị và Thuộc tính logic CSS Cấp độ 1 hiện đang ở trạng thái Bản nháp của Người biên tập. Điều đó có nghĩa là định nghĩa và thông tin về nó có thể thay đổi từ bây giờ đến khuyến nghị chính thức.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Nếu writing-modeđược đặt thành horizontal-lr, thuộc margin-inlinetính sẽ hoạt động giống như cài đặt margin-leftvà margin-right. Một khía cạnh thú vị của thuộc tính này là nó là một trong những thuộc tính logic không có bản đồ một-một với thuộc tính phi logic. Không có thuộc tính cũ hơn nào đặt cả (và chỉ) lề hướng nội dòng.

Nhưng thay đổi của phần tử writing-modethành một cái gì đó giống như vertical-lrvà các cạnh "nội tuyến" được xoay theo hướng thẳng đứng, hoạt động giống với thuộc tính margin-topvà hơn margin-bottom.

Cú pháp

margin-inline: (1,2)

Thật kỳ lạ khi thấy cú pháp của một thuộc tính tham chiếu đến cú pháp của một thuộc tính CSS khác ngay trong tài liệu, nhưng đó thực sự là điều đó. Về cơ bản nó đang cố gắng nói rằng thuộc tính chấp nhận các giá trị giống như margin-top(tối đa hai lần) theo cú pháp sau:

margin-top: | | auto;

Giá trị ban đầu: 0
Áp dụng cho: tất cả các phần tử ngoại trừ các phần tử bên trong bảng, vùng chứa cơ sở ruby và vùng chứa chú thích ruby
Kế thừa: không
Phần trăm: đối với tài sản vật chất tương ứng
Giá trị được tính toán: giống như margin-*các thuộc tính tương ứng
Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

Nếu bạn đã quen thuộc với thuộc tính tốc marginký thì margin-inlinebạn sẽ cảm thấy rất quen thuộc. Sự khác biệt duy nhất là nó hoạt động theo hai hướng thay vì bốn.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;