margin-block
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
* Some parts of this feature may have varying levels of support.
Thuộc tính rút gọn CSS margin-block xác định lề đầu và cuối khối logic của một phần tử, ánh xạ đến các lề vật lý tùy thuộc vào chế độ viết, hướng và hướng văn bản của phần tử.
Try it
margin-block: 10px 20px;
writing-mode: horizontal-tb;
margin-block: 20px 40px;
writing-mode: vertical-rl;
margin-block: 5% 20%;
writing-mode: horizontal-tb;
margin-block: 1rem auto;
writing-mode: vertical-lr;
<section id="default-example">
<div id="container">
<div class="row">One</div>
<div class="row transition-all" id="example-element">Two</div>
<div class="row">Three</div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
Các thuộc tính thành phần
Thuộc tính này là dạng rút gọn cho các thuộc tính CSS sau:
Cú pháp
/* Giá trị <length> */
margin-block: 10px 20px; /* Độ dài tuyệt đối */
margin-block: 1em 2em; /* tương đối với kích thước văn bản */
margin-block: 5% 2%; /* tương đối với chiều rộng của khối chứa gần nhất */
margin-block: 10px; /* đặt cả giá trị đầu và cuối */
margin-block: anchor-size(inline);
margin-block: calc(anchor-size(width) / 4) 1em;
/* Giá trị từ khóa */
margin-block: auto;
/* Giá trị toàn cục */
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;
Thuộc tính này tương ứng với margin-top và margin-bottom, hoặc margin-right và margin-left, tùy thuộc vào các giá trị được xác định cho writing-mode, direction và text-orientation.
Thuộc tính margin-block có thể được chỉ định bằng một hoặc hai giá trị.
- Khi chỉ định một giá trị, nó áp dụng cùng lề cho cả đầu và cuối.
- Khi chỉ định hai giá trị, lề đầu tiên áp dụng cho đầu, lề thứ hai cho cuối.
Giá trị
Thuộc tính margin-block nhận các giá trị giống như thuộc tính margin-top.
Định nghĩa chính thức
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Applies to | same as margin |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | a length |
Cú pháp chính thức
margin-block =
<'margin-top'>{1,2}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Ví dụ
Đặt lề đầu và cuối khối
CSS
div {
background-color: yellow;
width: 120px;
height: auto;
border: 1px solid green;
}
p {
margin: 0;
margin-block: 20px 40px;
background-color: tan;
}
.verticalExample {
writing-mode: vertical-rl;
}
HTML
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-margin-block |
Tương thích trình duyệt
Xem thêm
- Thuộc tính và giá trị logic CSS
- Các thuộc tính vật lý ánh xạ:
margin-top,margin-right,margin-bottomvàmargin-left writing-mode,direction,text-orientation