Thuộc tính chặn lề CSS
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính margin-block
chỉ định lề ở đầu và cuối theo hướng khối và là thuộc tính viết tắt cho các thuộc tính sau:
Các giá trị cho thuộc tính margin-block
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính khối lề có hai giá trị:
- khối lề: 10px 50px;
- lề khi bắt đầu là 10px
- lề ở cuối là 50px
Nếu thuộc tính khối lề có một giá trị:
- khối lề: 10px;
- lề ở đầu và cuối là 10px
Các thuộc tính CSS margin-block
và margin-inline
rất giống với các thuộc tính CSS margin-top
, margin-bottom
, margin-left
và margin-right
, nhưng các thuộc tính margin-block
và margin-inline
phụ thuộc vào hướng khối và hướng nội tuyến.
Lưu ý: writing-mode
tính CSS liên quan xác định hướng khối. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của khối cũng như kết quả của thuộc tính margin-block
. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.marginBlock="50px 20px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
margin-block | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Cú pháp CSS
margin-block: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default margin-block value. | Demo ❯ |
length | Specifies margin-block in px, pt, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies margin-block in percent relative to size of parent element in the inline direction. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Với giá trị thuộc tính writing-mode
của phần tử <div> được đặt thành Vertical-rl, phần đầu của phần tử theo hướng khối được di chuyển từ trên sang bên phải và phần cuối của phần tử được di chuyển từ dưới lên sang bên trái của yếu tố. Thay đổi trong writing-mode
cũng thay đổi hiệu ứng từ margin-block
:
#parentDiv {
writing-mode: vertical-rl;
}
#myDiv {
margin-block: 10px 50px;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính CSS Margin -block-end: Thuộc tính CSS Margin-block-end
Thuộc tính CSS Margin-block-start: Thuộc tính CSS Margin-block-start
Thuộc tính CSS Margin-bottom: Thuộc tính CSS Margin-bottom
Thuộc tính lề nội tuyến CSS: CSS lề nội tuyến
Thuộc tính lề trái CSS: CSS Margin-left
Thuộc tính lề phải CSS: CSS Margin-right
Thuộc tính lề trên của CSS: CSS Margin-top
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS