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

Các margin-block-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 khối. Nó được bao gồm trong đặc tả CSS Logical Properties Level 1, hiện đang trong bản nháp.

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

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

Nhưng nếu chúng ta thay đổi writing-modethành, chẳng hạn, theo chiều dọc, phần tử sẽ được xoay, đặt cạnh kết thúc về phía bên phải Kết quả là nó margin-block-endsẽ hoạt động giống như vậy margin-right. 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-block-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-end chấp nhận một độ dài hoặc giá trị từ khóa.

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