CSS Margins

Margin được sử dụng để tạo ra khoảng trống xung quanh phần tử, khoảng trống này nằm ở bên ngoài của bất kỳ đường viền nào đã được định nghĩa.

Ví dụ:

CSS Margins

Các thuộc tính CSS margin được sử dụng để tạo ra khoảng trống xung quanh phần tử, khoảng trống này nằm ở bên ngoài của bất kỳ đường viền nào đã được định nghĩa.

Với CSS, bạn có toàn quyền kiểm soát margin. Với CSS chúng ta có các thuộc tính để thiết lập margin cho mỗi cạnh của phần tử (cạnh trên, cạnh bên phải, cạnh dưới, và cạnh bên trái).

Margin - Các cạnh riêng biệt

CSS có các thuộc tính để chỉ định margin cho mỗi cạnh của phần tử: 

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

Tất cả các thuộc tính margin đều có thể có các giá trị sau:

• auto - Trình duyệt sẽ tự tính toán margin.
• length - Chỉ định một margin bằng đơn vị px, pt, cm,...
• % - Chỉ định một margin bằng giá trị % của chiều rộng của phần tử chứa.
• inherit - Chỉ định rằng margin sẽ được kế thừa từ phần tử cha.

Mẹo: Các giá trị âm được cho phép.

Ví dụ sau sẽ thiết lập các margin khác nhau cho cả bốn cạnh của phần tử <p>:

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

Margin - Shorthand Property

Để rút ngắn code, chúng ta có thể chỉ định tất cả các thuộc tính margin trong một thuộc tính duy nhất.

Thuộc tính margin là một shorthand property cho các thuộc tính margin riêng rẽ sau:

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

Sau đây là cách mà nó làm việc:

Nếu như thuộc tính margin có bốn giá trị:

margin: 25px 50px 75px 100px;

1. margin của cạnh trên là 25px.
2. margin của cạnh bên phải là 50px.
3. margin của cạnh dưới là 75px.
4. margin của cạnh bên trái là 100px.

Ví dụ sau sẽ sử dụng margin shorthand property với bốn giá trị:

p {
    margin: 25px 50px 75px 100px;
}

Nếu như thuộc tính margin có ba giá trị:

margin: 25px 50px 75px;

1. margin của cạnh trên là 25px.
2. margin của cạnh bên phải và cạnh bên trái là 50px.
3. margin của cạnh dưới là 75px.

Ví dụ sau sẽ sử dụng margin shorthand property với ba giá trị: 

p {
    margin: 25px 50px 75px;
}

Nếu như thuộc tính margin có hai giá trị:

margin: 25px 50px;

1. margin của cạnh trên và cạnh dưới là 25px.
2. margin của cạnh bên phải và cạnh bên trái là 50px.

Ví dụ sau sẽ sử dụng margin shorthand property với hai giá trị:

p {
    margin: 25px 50px;
}

Nếu như thuộc tính margin có một giá trị:

margin: 25px;

• margin của cả bốn cạnh đều là 25px.

Ví dụ sau sẽ sử dụng margin shorthand property với một giá trị: 

p {
    margin: 25px;
}

Giá trị auto 

Bạn có thể thiết lập thuộc tính margin thành auto để căn chỉnh giữa phần tử theo chiều ngang ở trong phần tử chứa của nó.

Phần tử sau đó sẽ chiếm chiều rộng được chỉ định, và không gian còn lại sẽ được chia đều giữa margin bên trái và margin bên phải.

Ví dụ sau sẽ sử dụng thuộc tính margin: auto:

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

Giá trị inherit

Ví dụ này cho phép margin bên trái của phần tử <p class="ex1"> được kế thừa từ phần tử cha là phần tử (<div>): 

Ví dụ này sẽ mô tả cách sử dụng của giá trị inherit:

div {
    border: 1px solid red;
    margin-left: 100px;
}

p.ex1 {
    margin-left: inherit;
}

Tất cả các thuộc tính CSS Margin

1. margin: Một shorthand property để thiết lập tất cả các thuộc tính margin trong một khai báo duy nhất.
2. margin-bottom: Thiết lập margin dưới của một phần tử.
3. margin-left: Thiết lập margin bên trái của một phần tử.
4. margin-right: Thiết lập margin bên phải của một phần tử.
5. margin-top: Thiết lập margin trên của một phần tử.