Margin-inline-end - Thủ thuật CSS

Các margin-inline-endbất động sản trong CSS xác định khoảng không gian dọc theo cạnh kết thúc bên ngoài của một phần tử theo hướng inline. Nó được bao gồm trong đặc tả CSS Logical Properties Level 1, hiện đang trong bản nháp.

.element ( margin-inline-end: 25%; writing-mode: vertical-lr; )

Cạnh kết thúc theo hướng inline được xác định bởi các phần tử writing-mode, directionvà text-orientation. Vì vậy, khi sử dụng margin-inline-endtrong ngữ cảnh ngang từ trái sang phải, nó hoạt động giống margin-rightnhư cạnh kết thúc của phần tử là phía bên phải.

Nhưng nếu chúng ta thay đổi writing-modethành, ví dụ, theo chiều dọc, phần tử sẽ được xoay theo chiều kim đồng hồ, đặt cạnh kết thúc về phía dưới cùng. Kết quả là, margin-inline-endcư xử giống như margin-bottom. Về cơ bản, cạnh bắt đầu có liên quan đến hướng nó chảy. Đó là những gì chúng tôi muốn nói khi nói về các thuộc tính "logic".

Cú pháp

margin-inline-end:

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 đó. Điều về cơ bản nó đang cố gắng nói là thuộc tính chấp nhận các giá trị giống như margin-topsau cú pháp này:

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ị

margin-block-start chấp nhận một độ dài hoặc giá trị từ khóa.

/* Length values */ margin-inline-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;