Margin trong CSS

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft

Trong bài hướng tự học CSS dẫn này, bạn sẽ học cách điều chỉnh phần không gian xung quanh một phần tử (Margin) bằng cách sử dụng CSS.

Nói đơn giản là cách xử lý margin trong CSS.

Thuộc tính margin trong CSS là gì?

Thuộc tính marign trong CSS cho phép bạn thiết lập khoảng cách xung quanh đường viền của hộp phần tử (hoặc cạnh của hộp phần tử, nếu nó không có đường viền).

Nếu bạn đã quên thì mời xem lại bài viết về CSS Box Model, hoặc xem lại hình minh họa ở dưới đây:

Minh họa CSS Box Model trong CSS
CSS Box Model trong CSS

Lề (Margin) của một phần tử không bị ảnh hưởng bởi màu nền của nó, nó luôn trong suốt.

Tuy nhiên, nếu phần tử mẹ có màu nền, nó sẽ hiển thị qua vùng lề của nó.

1. Thiết lập margin trong CSS

Thiết lập Margin trong CSS
Thiết lập Margin trong CSS

Bạn có thể chỉ định margin cho các cạnh riêng lẻ của một phần tử như trên, phải, dướibên trái bằng cách sử dụng các thuộc tính CSS tương ứng:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

HTML:

<h1>Đây là một ví dụ về Margin</h1>
<p>Margin là phần lề của phần tử. Nó giúp chúng giữ khoảng cách với các phần tử khác</p>

Còn đây là CSS:

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
    background: #00ccc5;
}
p {
    margin-left: 75px;
    margin-right: 75px;
    background: #00ccc5;
}

Kết quả khi chạy chương trình, ta được như thế này:

Ví dụ thiết lập Margin trong CSS

Các thuộc tính margin có thể được chỉ định bằng cách sử dụng các giá trị sau:

  • Các loại kích thước: px, em, rem, pt, cm, v.v. (Đọc lại bài viết CSS Font để hiểu rõ hơn về một số loại kích thước trong CSS)
  • %: Chỉ định lề tính bằng phần trăm (%) chiều rộng của phần tử chứa nó.
  • auto: Trình duyệt tính toán mức lợi nhuận phù hợp để sử dụng.
  • inherit: Chỉ định rằng lề phải được kế thừa từ phần tử mẹ.
  • Ngoài ra, bạn cũng có thể chỉ định lề âm trên một phần tử, ví dụ: margin: -10px;, margin: -5%;, …

2. Cách viết tắt thuộc tính Margin trong CSS

Thuộc tính margin là một thuộc tính giúp bạn viết tắt các thuộc tính riêng lẻ của lề phần tử:

Nó cũng được sử dụng để thu gọn code hơn.

Thay vì phải viết như thế này:

h1 {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

Thì bạn có thể viết thế này:

h1 {
    margin: 10px 15px 20px 25px;
}

Ngắn gọn hơn rất nhiều đúng không?

Hãy xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:

HTML:

<h1>Margin 4 cạnh đều nhau</h1>
<p>Margin Trái Phải bằng nhau và Trên, Dưới bằng nhau</p>
<div>Margin Trái Phải bằng nhau</div>
<hr />
<p>Ví dụ về viết tắt thuộc tính margin trong CSS</p>

CSS:

h1 {
  margin: 50px; /* Áp dụng cho cả 4 cạnh */
}
p {
  margin: 25px 75px; /* TOP và BOTTOM | LEFT và RIGHT */
}
div {
  margin: 25px 50px 75px; /* TOP | LEFT và RIGHT | BOTTOM */
}
hr {
  margin: 25px 50px 75px 100px; /* TOP | RIGHT | BOTTOM | LEFT */
}
h1, p, div {
  background: #00ccc5;
}

Kết quả ta được như thế này:

Ví dụ viết tắt thuộc tính Margin trong CSS
Ví dụ viết tắt thuộc tính Margin trong CSS

Ký hiệu viết tắt này có thể nhận 1, 2, 3 hoặc 4 giá trị được phân tách bằng khoảng trắng.

  • Nếu 1 giá trị được chỉ định, nó sẽ được áp dụng cho cả bốn mặt.
  • Nếu 2 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng và dưới cùng, và giá trị thứ 2 được áp dụng cho phía bên phải và bên trái của hộp phần tử.
  • Nếu 3 giá trị được chỉ định, giá trị 1 được áp dụng cho phía trên cùng, giá trị thứ 2 được áp dụng cho phía bên phải và bên trái, và giá trị 3 được áp dụng cho phía dưới.
  • Nếu 4 giá trị được chỉ định, chúng sẽ được áp dụng tương ứng cho phía trên, bên phải, dưới cùng và bên trái của hộp phần tử theo thứ tự đã chỉ định.

Bạn nên viết tắt thuộc tính margin, vì nó sẽ giúp bạn tiết kiệm thời gian, tránh nhiều code và làm cho code CSS của bạn dễ theo dõi và duy trì hơn.

Lưu ý: Lề của các phần tử sẽ nằm chồng lên nhau. Do đó, khoảng cách thực tế giữa 2 phần tử có thiết lập margin là bằng margin lớn hơn.

Cách căn giữa phần tử theo chiều ngang với marign auto

Giá trị auto cho thuộc tính margin nói cho trình duyệt web biết hãy tự động tính toán khoảng cách của lề.

Kết quả là trình duyệt sẽ căn phần tử ở giữa, theo chiều ngang.

Hãy thử ví dụ sau để hiểu cách nó hoạt động:

Mình có một thẻ div như sau:

<div class="container">
    <h1>Div được căn giữa</h1>
    <p>Bằng thuộc tính margin: 0 auto;.</p>
</div>

Đây là CSS của nó:

.container {
    width: 300px;
    height: 200px;
    background: #00ccc5;
    margin: 0 auto;
}

Và đây là kết quả nhận được:

Ví dụ cách căn  giữa phần tử bằng margin auto
Ví dụ cách căn giữa phần tử bằng margin auto

Như vậy, qua bài viết này, mình đã giúp bạn tìm hiểu về thuộc tính Margin trong CSS.

Hãy thử làm lại các ví dụ, thay đổi các giá trị để chơi với Margin bạn nhé.

Đến bài này, coi như bạn đã tự học xong về CSS cơ bản rồi đấy.

Cũng đơn giản thôi phải không nào.

Đọc thêm: Border trong CSS


Có thể bạn muốn xem

Pesudo class trong CSS

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Pesudo Element trong CSS

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Leave a reply

Please enter your comment!
Please enter your name here