Margin-block - Thủ thuật CSS

margin-blocklà một thuộc tính viết tắt trong CSS đặt giá trị margin-block-startvà của một phần tử margin-block-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-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Nếu writing-modeđược đặt thành horizontal-lr, thuộc margin-blocktính sẽ hoạt động giống như cài đặt margin-topvà margin-bottom. 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ũ nào đặt cả (và duy nhất) các lề hướng khối.

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

Cú pháp

margin-block: (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-blockbạ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-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;