Margin trong CSS - Tự học CSS

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 thuần là cách giải quyết và xử lý margin trong CSS .

Tóm Tắt

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:

Bạn đang đọc: Margin trong CSS – Tự học CSS

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 thành phần 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

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ưới và bê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 giải trí :
HTML :

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

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 hoàn toàn có thể được chỉ định bằng cách sử dụng những 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 hoàn toà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 giải trí như thế nào :
HTML :

Margin 4 cạnh đều nhau
Margin Trái Phải bằng nhau và Trên, Dưới bằng nhau
Xem thêm: nth-child vs nth-of-type trong CSS có gì khác nhau? 

Margin Trái Phải bằng nhau

Ví dụ về viết tắt thuộc tính margin trong CSS

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
Ký hiệu viết tắt này hoàn toàn có thể nhận 1, 2, 3 hoặc 4 giá trị được phân tách bằng khoảng chừ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 chi phí thời hạn, 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 những thành phần sẽ nằm chồng lên nhau. Do đó, khoảng cách trong thực tiễn giữa 2 thành phần 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 thành phần ở giữa, theo chiều ngang .
Hãy thử ví dụ sau để hiểu cách nó hoạt động giải trí :
Mình có một thẻ div như sau :


    Div được căn giữa
    Bằng thuộc tính margin : 0 auto ; .

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

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

Và đây là tác dụng 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 những ví dụ, biến hóa những 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.

Xem thêm: Cách hợp nhất, cố định hàng, cột trong Google Sheets đơn giản, dễ dàng

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

Đọc thêm: Border trong CSS

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com