1. Web
  2. CSS
  3. Reference
  4. Properties
  5. margin-inline-start

margin-inline-start

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 margin-inline-start CSS xác định lề logic bắt đầu theo chiều ngang của phần tử, ánh xạ tới một lề vật lý tùy theo chế độ viết, hướng và hướng văn bản của phần tử. Nó tương ứng với thuộc tính margin-top, margin-right, margin-bottom, hoặc margin-left tùy thuộc vào các giá trị được định nghĩa cho writing-mode, direction, và text-orientation.

Try it

margin-inline-start: 20px;
writing-mode: horizontal-tb;

margin-inline-start: 20px;
writing-mode: vertical-rl;

margin-inline-start: 20%;
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ú pháp

css
/* Giá trị <length> */
margin-inline-start: 10px; /* Độ dài tuyệt đối */
margin-inline-start: 1em; /* Tương đối với kích thước văn bản */
margin-inline-start: 5%; /* Tương đối với chiều rộng của khối chứa gần nhất */
margin-inline-start: anchor-size(block);
margin-inline-start: calc(anchor-size(--my-anchor width, 30px) / 4);

/* Giá trị từ khóa */
margin-inline-start: auto;

/* Giá trị toàn cục */
margin-inline-start: inherit;
margin-inline-start: initial;
margin-inline-start: revert;
margin-inline-start: revert-layer;
margin-inline-start: unset;

Thuộc tính này liên quan đến margin-block-start, margin-block-end, và margin-inline-end, là những thuộc tính xác định các lề khác của phần tử.

Giá trị

Thuộc tính margin-inline-start nhận các giá trị giống như thuộc tính margin-top.

Định nghĩa hình thức

Initial value0
Applies tosame as margin
Inheritedno
Percentagesdepends on layout model
Computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length

Cú pháp hình thức

margin-inline-start = 
  <'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ề bắt đầu theo chiều ngang

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}

Kết quả

Đặc tả

Specification
CSS Logical Properties and Values Module Level 1
# margin-properties

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content