Tidadigi Logo

CSS Margins

CSS margins được sử dụng để tạo khoảng trống xung quanh một phần tử. Chúng tách nó khỏi các phần tử lân cận và cạnh của trang web. Chúng kiểm soát bố cục bằng cách điều chỉnh khoảng cách giữa các phần tử. Điều này giúp cải thiện tổ chức và khả năng đọc.

Syntax:

body {
margin: value;
}

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            margin: 20px ;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box">
        This box has a margin of 20px vertically.
    </div>
</body>
</html>

<!--Driver Code Ends-->
  • margin: 20px; áp dụng margin 20px cho tất cả bốn cạnh của phần tử.
css-margins-padding
CSS Margin

Types of Margin Values

  • Pixels (px): Đây là đơn vị phổ biến nhất, nó chỉ định một số lượng pixel cố định.
  • Percentage (%): Margin được tính theo tỷ lệ phần trăm chiều rộng (ngang) hoặc chiều cao (dọc) của phần tử chứa.
  • Other units: Các đơn vị ít phổ biến hơn như em, rem, vh và vw cũng có thể được sử dụng. Chúng dùng để định kích thước tương đối.
  • Auto: Trình duyệt tự tính toán kích thước margin phù hợp. Nó thường được sử dụng để căn giữa các phần tử.

Note: Chúng ta cũng có thể sử dụng các giá trị âm cho margins.

Margin Properties Values

Margin PropertyDescriptionExample
margin-topĐặt top margin của một phần tử.margin-top: 20px ;
margin-rightĐặt right margin của một phần tử.margin-right: 15px;
margin-bottomChỉ định margin ở phía bottom của một phần tử.margin-bottom: 30px;
margin-left:Xác định chiều rộng của margin ở phía left.margin-left: 10px;
marginShorthand để đặt margins trên cả bốn cạnh.margin: 10px 20px;

Dưới đây là các ví dụ về thuộc tính margin với các giá trị khác nhau:

Example of margin property with 4 values

Nếu thuộc tính margin chứa bốn giá trị, thì giá trị đầu tiên đặt top margin. Giá trị thứ hai đặt right margin, giá trị thứ ba đặt bottom margin và giá trị thứ tư đặt left margin.:

margin: 40px 100px 120px 80px;

  • top margin = 40px
  • right margin = 100px
  • bottom margin = 120px
  • left margin = 80px
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            margin: 40px 100px 120px 80px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p> Margin properties </p>
</body>

</html>

<!--Driver Code Ends-->

Example of margin property with 3 values

Nếu thuộc tính margin chứa ba giá trị, thì giá trị đầu tiên đặt top margin. Giá trị thứ hai đặt right and left margin. Giá trị thứ ba đặt bottom margin.

margin: 40px 100px 120px; 

  • top = 40px
  • right and left = 100px
  • bottom = 120px
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            margin: 40px 100px 120px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>
        Margin properties
    </p>
</body>
</html>
<!--Driver Code Ends-->

Example of margin property with 2 values

Nếu thuộc tính margin chứa hai giá trị, giá trị đầu tiên áp dụng cho top and bottom margin. Giá trị thứ hai áp dụng cho right and left margin.

margin: 40px 100px; 

  • top and bottom = 40px;
  • left and right = 100px;
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            margin: 40px 100px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>
        Margin properties
    </p>
</body>
</html>
<!--Driver Code Ends-->

Example of margin property with 1 value

Nếu thuộc tính margin có một giá trị, thì nó sẽ áp dụng cho tất cả các cạnh của phần tử.

margin: 40px; 

  • top, right, bottom and left = 40px
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            margin: 40px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>
        Margin properties
    </p>
</body>
</html>

<!--Driver Code Ends-->

Example of margin: auto property

margin: auto;

HTML 
//Driver Code Starts
<html>
<head>
//Driver Code Ends

    <style>
        div {
            margin: auto;
            width: 50%;
            border: 1px solid black;
            text-align: center;
        }
    </style>

//Driver Code Starts
</head>
<body>
    <div> Centered using margin: auto; </div>
</body>
</html>

//Driver Code Ends
  • margin: auto;: Tự động điều chỉnh margins bên trái và bên phải để căn giữa phần tử theo chiều ngang.
  • Phần tử phải có chiều rộng xác định để margin: auto; hoạt động hiệu quả.

Example of margin: inherit; Property

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .parent {
            margin: 20px;
        }
        .child {
            margin: inherit;
            border: 1px solid black;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="parent">
        Parent Element
        <div class="child"> Child inherits margin from parent. </div>
    </div>
</body>
</html>

<!--Driver Code Ends-->


  • margin: inherit;: Phần tử con kế thừa giá trị margin của phần tử cha.
  • Trong ví dụ này, margin của phần tử con được đặt thành 20px, khớp với margin của phần tử cha.

Last Updated : 21/07/2025