🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về lề(Margins), cách viết code ngắn gọn của viền(Margins) trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

1.Lề(Margins)

Thuộc tính margin CSS được sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền xác định nào.

Với CSS, bạn có toàn quyền kiểm soát các lề. Có các thuộc tính để đặt lề cho mỗi bên của một phần tử (trên cùng, bên phải, dưới cùng và bên trái).

2. Các mặt riêng lẻ

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

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

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

  • auto – trình duyệt tự tính toán hợp lý nhất
  • length – chỉ định lề bằng px, pt, cm, v.v.
  • % – chỉ định lề tính bằng% chiều rộng của phần tử chứa
  • inherit – chỉ định rằng lề phải được kế thừa từ phần tử mẹ

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

Ví dụ: Đặt các lề khác nhau cho cả bốn cạnh của phần tử :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Copy and chạy code

3. Cách viết ngắn gọn Margin

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

Thuộc tính margin là thuộc tính viết tắt cho các thuộc tính margin riêng lẻ sau:

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

Vì vậy, đây là cách nó hoạt động:

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

  • margin: 25px 50px 75px 100px;
    • lề trên là 25px
    • lề phải là 50px
    • lề dưới là 75px
    • lề trái là 100px

Ví dụ: Sử dụng thuộc tính tốc ký margin với bốn giá trị:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

Copy and chạy code

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

  • margin: 25px 50px 75px;
    • lề trên là 25px
    • lề phải và trái là 50px
    • lề dưới là 75px

Ví dụ: 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

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

  • margin: 25px 50px;
    • lề trên và dưới là 25px
    • lề trái và lề trái là 50px
p {
  margin: 25px 50px;
}

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

  • margin: 25px;
    • cả bốn lề đều là 25px
p {
  margin: 25px;
}

4. Giá trị tự động

Bạn có thể đặt thuộc tính lề thành auto để căn giữa phần tử theo chiều ngang trong vùng chứa của nó.

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

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin:auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

5. Kế thừa giá trị

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

Ví dụ:

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

p.ex1 {
  margin-left: inherit;
}

6. Thu gọn lề (Margin Collapse)

Lề trên và dưới của các phần tử đôi khi được thu gọn thành một lề duy nhất bằng lề lớn nhất trong hai lề.

Điều này không xảy ra ở lề trái và lề phải! Chỉ lề trên và dưới!

Hãy xem ví dụ sau:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

</body>
</html>

Copy and chạy code

Trong ví dụ trên, phần tử < h1 > có lề dưới là 50px và phần tử < h2 > có lề trên được đặt thành 20px.

Theo lẽ thường, lề dọc giữa < h1 > và < h2 > sẽ là tổng cộng 70px (50px + 20px). Nhưng do margin bị thu gọn, margin thực tế cuối cùng là 50px.

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM