margin-inline
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 margin-inline CSS là thuộc tính viết tắt xác định cả lề logic bắt đầu và kết thúc theo chiều ngang của phần tử, ánh xạ tới các lề vật lý tùy theo chế độ viết, hướng và hướng văn bản của phần tử.
Try it
margin-inline: 5% 10%;
writing-mode: horizontal-tb;
margin-inline: 10px 40px;
writing-mode: vertical-rl;
margin-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;
<section id="default-example">
<div id="container">
<div class="col">One</div>
<div class="col transition-all" id="example-element">Two</div>
<div class="col">Three</div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
unicode-bidi: bidi-override;
}
Các thuộc tính thành phần
Thuộc tính này là viết tắt của các thuộc tính CSS sau:
Cú pháp
/* Giá trị <length> */
margin-inline: 10px 20px; /* Độ dài tuyệt đối */
margin-inline: 1em 2em; /* Tương đối với kích thước văn bản */
margin-inline: 5% 2%; /* Tương đối với chiều rộng của khối chứa gần nhất */
margin-inline: 10px; /* Đặt cả giá trị bắt đầu và kết thúc */
margin-inline: anchor-size(width);
margin-inline: calc(anchor-size(self-block) / 5) auto;
/* Giá trị từ khóa */
margin-inline: auto;
/* Giá trị toàn cục */
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: 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 định nghĩa cho writing-mode, direction, và text-orientation.
Thuộc tính margin-inline 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 một lề cho cả bắt đầu và kết thúc.
- Khi chỉ định hai giá trị, lề đầu tiên áp dụng cho bắt đầu, giá trị thứ hai cho kết thúc.
Giá trị
Thuộc tính margin-inline nhận các giá trị giống như thuộc tính margin-top.
Định nghĩa hì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 hình thức
margin-inline =
<'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ề bắt đầu và kết thúc theo chiều ngang
CSS
div {
background-color: yellow;
width: 120px;
height: auto;
border: 1px solid green;
}
p {
margin: 0;
margin-inline: 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ả
Đặc tả
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-margin-inline |
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ý được ánh xạ:
margin-top,margin-right,margin-bottom, vàmargin-left writing-mode,direction,text-orientation