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

Các margin-block-startbất động sản trong CSS xác định khoảng không gian dọc theo cạnh khởi đầu 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-start: 25%; writing-mode: vertical-lr; )

Cạnh bắt đầu 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-starttrong ngữ cảnh ngang từ trái sang phải, nó hoạt động giống margin-topnhư cạnh bắt đầu của phần tử là phần trên cùng của nó.

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, đặt cạnh bắt đầu về phía bên trái. Kết quả là, margin-block-startcư xử giống như margin-left. 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-start:

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-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;