Tidadigi Logo

CSS margin-top Property

Thuộc tính margin-top trong CSS dùng để đặt lề trên cho một phần tử. Nó đặt vùng lề ở phía trên của phần tử đó. Giá trị mặc định của thuộc tính margin-top là 0.

Syntax:

margin-top: length|auto|initial|inherit;

Property values:

  • length: Nó được dùng để chỉ định độ dài của lề với một giá trị cố định. Giá trị này có thể dương, âm hoặc bằng không.
  • percentage (%): Nó được dùng để chỉ định kích thước lề theo phần trăm so với chiều rộng phần tử chứa.
  • auto: Thuộc tính này được dùng khi trình duyệt tự động xác định margin-top.
  • initial: Nó được dùng để đặt thuộc tính margin-top về giá trị mặc định của nó.
  • inherit: Nó được dùng khi thuộc tính margin-top được kế thừa từ phần tử cha.

Example: Trong ví dụ này, ta sử dụng thuộc tính margin-top: length;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

    <!-- margin-top CSS property -->
    <style>
        p {
            margin-top: 50px;
            background-color: green;
        }
    </style>
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <p style="">
        This paragraph has 50px top margin .
    </p>
</body>
</html>

Output:

css-margin-top-property

Example: Trong ví dụ này, chúng ta đang sử dụng thuộc tính margin-top: %;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

    <!-- margin-top CSS property -->
    <style>
        p {
            margin-top: 5%;
            background-color: green;
        }
    </style>
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <p style="">
        This paragraph has 5% top margin .
    </p>
</body>
</html>

Output:

css-margin-top-property

Example: Trong ví dụ này, chúng ta đang sử dụng thuộc tính margin-top: auto;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

    <!-- margin-top CSS property -->
    <style>
        h3 {
            margin-top: auto;
            background-color: green;
        }
    </style>
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <h3 style="">
        margin-top: auto;
    </h3>
</body>
</html>

Output:

css-margin-top-property

Example: Trong ví dụ này, chúng ta đang sử dụng thuộc tính margin-top: initial;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

    <!-- margin-top CSS property -->
    <style>
        h3 {
            margin-top: initial;
            background-color: green;
        }
    </style>
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <h3 style="">
        margin-top: initial;
    </h3>
</body>
</html>

Output:

css-margin-top-property

Example: Trong ví dụ này, chúng ta đang sử dụng thuộc tính margin-top: inherit;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

    <!-- margin-top CSS property -->
    <style>
        .gfg {
            margin-top: 100px;
        }

        h3 {
            margin-top: inherit;
            background-color: green;
        }
    </style>
</head>

<body style="background-color:lightgreen;">

    <div class="gfg">

        <!-- margin-top property used here -->
        <h3 style="">
            margin-top: inherit;
        </h3>
    </div>
</body>
</html>

Output:

css-margin-top-property

Note: Lề trên và dưới của các phần tử đôi khi được gộp thành một lề duy nhất. Lề này bằng lề lớn nhất trong hai lề đó. Điều này không xảy ra trên lề ngang mà chỉ xảy ra với lề dọc. Hiện tượng này được gọi là Margin Collapse.

Supported Browsers: Các trình duyệt được hỗ trợ bởi margin-top property được liệt kê dưới đây:

  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Internet Explorer 3.0 trở lên
  • Firefox 1.0 trở lên
  • Opera 3.5 trở lên
  • Safari 1.0 trở lên

Last Updated : 21/07/2025