margin-block-end
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS margin-block-end xác định lề cuối khối logic của một phần tử, ánh xạ đến 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-end: 20px;
writing-mode: horizontal-tb;
margin-block-end: 20px;
writing-mode: vertical-rl;
margin-block-end: 20%;
writing-mode: horizontal-tb;
margin-block-end: 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ú pháp
/* Giá trị <length> */
margin-block-end: 10px; /* Độ dài tuyệt đối */
margin-block-end: 1em; /* tương đối với kích thước văn bản */
margin-block-end: 5%; /* tương đối với chiều rộng của khối chứa gần nhất */
margin-block-end: anchor-size(inline);
margin-block-end: calc(anchor-size(--my-anchor block, 20px) / 4);
/* Giá trị từ khóa */
margin-block-end: auto;
/* Giá trị toàn cục */
margin-block-end: inherit;
margin-block-end: initial;
margin-block-end: revert;
margin-block-end: revert-layer;
margin-block-end: unset;
Thuộc tính này tương ứng với margin-top, margin-right, margin-bottom hoặc 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 này liên quan đến margin-block-start, margin-inline-start và margin-inline-end, vốn xác định các lề khác của phần tử.
Giá trị
Thuộc tính margin-block-end nhận các giá trị giống như thuộc tính margin-top.
Định nghĩa chính thức
| Initial value | 0 |
|---|---|
| Applies to | same as margin |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
| Animation type | a length |
Cú pháp chính thức
margin-block-end =
<'margin-top'>
<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ề cuối khối
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
margin-block-end: 20px;
background-color: #c8c800;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # margin-properties |
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