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

margin-right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính margin-right CSS đặt vùng lề ở phía bên phải của phần tử. Giá trị dương đặt phần tử xa hơn so với các phần tử lân cận, trong khi giá trị âm đặt nó gần hơn.

Try it

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

Lề dọc của hai hộp liền kề có thể hợp nhất lại. Hiện tượng này được gọi là thu gọn lề.

Cú pháp

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

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

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

Thuộc tính margin-right được chỉ định là từ khóa auto, hoặc một <length>, hoặc một <percentage>. Giá trị của nó có thể là dương, không hoặc âm.

Giá trị

<length>

Kích thước của lề dưới dạng giá trị cố định.

<percentage>

Kích thước của lề dưới dạng phần trăm, tương đối với kích thước nội tuyến (chiều rộng trong ngôn ngữ ngang, được xác định bởi writing-mode) của khối chứa.

auto

Lề phải nhận một phần không gian ngang chưa sử dụng, được xác định chủ yếu bởi chế độ bố cục được dùng. Nếu cả giá trị của margin-left và margin-right đều là auto, không gian tính toán được phân bổ đều nhau. Bảng dưới đây tóm tắt các trường hợp khác nhau:

Giá trị của display Giá trị của float Giá trị của position Giá trị tính toán của auto Ghi chú
inline, inline-block, inline-table bất kỳ static hoặc relative 0 Chế độ bố cục nội tuyến
block, inline, inline-block, block, table, inline-table, list-item, table-caption bất kỳ static hoặc relative 0, ngoại trừ khi cả margin-left và margin-right được đặt thành auto. Trong trường hợp đó, nó được đặt thành giá trị căn giữa phần tử bên trong phần tử cha. Chế độ bố cục khối
block, inline, inline-block, block, table, inline-table, list-item, table-caption left hoặc right static hoặc relative 0 Chế độ bố cục khối (phần tử nổi)
bất kỳ table-*, ngoại trừ table-caption bất kỳ bất kỳ 0 Các phần tử table-* nội bộ không có lề, hãy sử dụng border-spacing thay thế
bất kỳ, ngoại trừ flex, inline-flex, hoặc table-* bất kỳ fixed hoặc absolute 0, ngoại trừ khi cả margin-left và margin-right được đặt thành auto. Trong trường hợp đó, nó được đặt thành giá trị căn giữa vùng viền bên trong width có sẵn, nếu cố định. Chế độ bố cục định vị tuyệt đối
flex, inline-flex bất kỳ bất kỳ 0, ngoại trừ khi có không gian ngang tự do dương. Trong trường hợp đó, nó được phân bổ đều cho tất cả các lề auto theo chiều ngang. Chế độ bố cục Flexbox

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

Initial value0
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

Cú pháp hình thức

margin-right = 
  <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ề phải bằng pixel và phần trăm

css
.content {
  margin-right: 5%;
}
.side-box {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

Đặc tả

Specification
CSS Box Model Module Level 3
# margin-physical

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