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

margin-top

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-top CSS đặt vùng lề ở phía trên cùng 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-top: 1em;

margin-top: 10%;

margin-top: 10px;

margin-top: 0;

<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></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;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

Thuộc tính này không có hiệu lực đối với các phần tử nội tuyến không phải phần tử thay thế, chẳng hạn như <span> hoặc <code>.

Cú pháp

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

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

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

Thuộc tính margin-top đượ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

Trình duyệt chọn một giá trị phù hợp để sử dụng. Xem margin.

Đị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-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ề trên dương và âm

css
.content {
  margin-top: 5%;
}
.side-box {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

Đặ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