Lề CSS

Thêm khoảng trắng giữa các phần tử trên trang web là một phần quan trọng của việc thiết kế trải nghiệm người dùng về mặt thẩm mỹ và chức năng. Lề được sử dụng để tạo vùng trống xung quanh phần tử HTML nhằm tách phần tử đó khỏi các đối tượng khác trên trang web.

Thuộc tính lề CSS và bốn thuộc tính con của nó, được sử dụng để đặt lề xung quanh một phần tử trong HTML.

Hướng dẫn này sẽ thảo luận, với tài liệu tham khảo và ví dụ, cách sử dụng thuộc tính margin và các thuộc tính con của nó để tạo lề xung quanh một phần tử trong CSS. Khi kết thúc việc đọc hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc áp dụng lợi nhuận cho một phần tử web bằng cách sử dụng CSS.

Lề CSS

Thuộc tính lề CSS được sử dụng để tạo khoảng trống xung quanh một phần tử. Không gian này cho phép bạn dễ dàng tách các phần tử khác nhau trên một trang web, bên ngoài bất kỳ đường viền nào.

Trong CSS, thuộc tính ký quỹ là viết tắt của bốn thuộc tính con. Các thuộc tính con này được sử dụng để đặt lề trên, phải, dưới và bên trái cho phần tử web.

Mỗi phần tử trên một trang web bao gồm một hoặc nhiều hộp. Các phần tử sử dụng mô hình hộp để phác thảo cách hộp được hiển thị trên trang web.

Lề là một trong những thành phần chính của mô hình hộp và tồn tại ở lớp ngoài cùng của mô hình hộp. Trong hình bên dưới, bạn có thể thấy rằng các lề được áp dụng bên ngoài các đường viền trong một phần tử HTML:

Với mục đích của hướng dẫn này, chúng tôi sẽ tập trung vào thuộc tính ký quỹ. Nếu bạn đang muốn tìm hiểu thêm về các thành phần khác nhau của mô hình hộp, bạn có thể đọc các bài viết của chúng tôi về đường viền và phần đệm CSS.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Các mặt riêng lẻ lề CSS

Các thuộc tính sau được sử dụng để đặt lề cho mỗi bên của phần tử web:

margin-top
lề phải
margin-bottom
lề trái

Các thuộc tính này cho phép bạn xác định lề cho một mặt riêng lẻ của một phần tử. Mỗi thuộc tính này chấp nhận một trong bốn giá trị để xác định kích thước của lề. Chúng như sau:

độ dài chỉ định lề bằng px, em hoặc một phép đo độ dài CSS khác.
phần trăm (%) chỉ định lề dưới dạng phần trăm chiều rộng của phần tử mà lề được áp dụng.
tự động hướng dẫn trình duyệt tính toán lợi nhuận.
kế thừa chỉ định lề phải được kế thừa từ phần tử mẹ của nó.

Hãy xem qua một ví dụ để thảo luận về cách hoạt động của các công ty con ký quỹ.

Giả sử chúng ta đang thiết kế một chiếc hộp và chúng ta muốn bao gồm các lề xung quanh chiếc hộp của mình để tách nó khỏi các phần tử khác trên trang web. Hộp của chúng ta phải có lề trên 50px, lề trái 30px, lề phải 40px và lề dưới 50px. Chúng tôi có thể tạo hộp này bằng mã sau:

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 40px;
	margin-bottom: 40px;
	border: 1px solid red;
}

.outer {
	border: 1px solid blue;
}

Mã của chúng tôi trả về:

Trong mã của chúng tôi, chúng tôi đã tạo hai hộp. Hộp đầu tiên, được xác định bằng thẻ

, được gán cho lớp outer . Trong tệp CSS của chúng tôi, chúng tôi tuyên bố rằng bất kỳ phần tử nào có outer lớp phải có đường viền màu xanh đậm rộng 1px. Chúng tôi đã xác định đường viền này để giới thiệu lề mà hộp bên trong của chúng ta đã tạo.

Bên trong thẻ

của chúng tôi là thẻ

, chứa văn bản This is a box . Thẻ

của chúng tôi có tên lớp là box , có nghĩa là kiểu cho hộp box trong tệp CSS của chúng tôi được áp dụng cho phần tử

của chúng tôi.

Thẻ

của chúng tôi đã được chỉ định lề trên 50px, lề trái 30px, lề phải 40px và lề dưới 40px. Chúng tôi cũng đã tạo cho thẻ

của mình một đường viền màu đỏ đặc rộng 1px. Như bạn có thể thấy trong hình trên, phần lề của chúng tôi đã tạo ra một khoảng trống giữa đường viền của hộp

và hộp màu xanh lam của chúng tôi. Nếu chúng ta không có biên, các hộp này sẽ gần nhau hơn.

Viết tắt CSS Margin

Trong ví dụ trên, chúng tôi đã sử dụng hết bốn dòng mã để chỉ định lề mà chúng tôi muốn áp dụng cho hộp của mình. Chúng tôi có thể làm cho mã của mình hiệu quả hơn bằng cách sử dụng thuộc tính ký quỹ.

Thuộc tính ký quỹ là viết tắt của bốn đặc tính con mà chúng ta đã thảo luận trước đó. Thuộc tính này cho phép bạn chỉ định lề cho một hộp trên một dòng mã, thay vì trên nhiều dòng.

Cú pháp bạn sử dụng cho ký tự viết tắt phụ thuộc vào số lượng giá trị bạn chỉ định. Số lượng giá trị tối thiểu bạn có thể chỉ định là một và giá trị tối đa là bốn. Hãy phân tích một ví dụ về cách sử dụng thuộc tính tốc ký ký quỹ trong tất cả các trường hợp sử dụng tiềm năng.

Bốn giá trị

Thay vì sử dụng các thuộc tính ký quỹ riêng lẻ để tạo một hộp có bốn giá trị ký quỹ khác nhau, bạn có thể sử dụng thuộc tính ký quỹ viết tắt và chỉ định bốn giá trị.

Nếu bạn chỉ định bốn giá trị với thuộc tính margin, thứ tự mà các lề của bạn sẽ xuất hiện như sau:

Giá trị đầu tiên là lợi nhuận trên cùng.
Giá trị thứ hai là lề phải.
Giá trị thứ ba là lề dưới cùng.
Giá trị thứ tư là lề trái.

Giả sử chúng ta muốn tạo một hộp có lề trên 25px, lề phải 25px, lề dưới 50px và lề trái 60px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

box {
	margin: 25px 25px 50px 60px;
border: 1px solid red;
}

Mã của chúng tôi trả về:

Trong ví dụ của chúng tôi, chúng tôi đã tạo một hộp bên trong với một lề khác nhau trên mỗi cạnh dựa trên các giá trị mà chúng tôi đã chỉ định ở trên. Chúng tôi cũng đã bao quanh hộp bên trong của chúng tôi với một lề màu đỏ đặc rộng 1px. Ngoài ra, chúng tôi sử dụng lại mã cho hộp màu xanh lam của chúng tôi trước đó để minh họa kích thước của lề mà chúng tôi đã áp dụng cho hộp của mình.

Ba giá trị

Nếu bạn muốn có một lề trên và dưới khác nhau, nhưng sử dụng cùng một lề cho bên trái và bên phải của một hộp, bạn có thể sử dụng thuộc tính margin và chỉ định ba giá trị.

Thứ tự áp dụng ba lề bạn chỉ định cho một hộp như sau:

Giá trị đầu tiên là lợi nhuận trên cùng.
Giá trị thứ hai là lề cho bên phải và bên trái của một phần tử.
Giá trị thứ ba là lề dưới cùng.

Giả sử chúng tôi muốn tạo một hộp có lề 50px trên đầu hộp, lề 25px ở bên trái và phải của hộp và lề 60px ở dưới cùng của hộp. Chúng tôi có thể tạo một hộp với các lề này bằng cách sử dụng mã sau:

Mã của chúng tôi trả về:

Ba giá trị

Thứ tự áp dụng ba lề bạn chỉ định cho một hộp như sau:

Giá trị đầu tiên là lợi nhuận trên cùng.
Giá trị thứ hai là lề cho bên phải và bên trái của một phần tử.
Giá trị thứ ba là lề dưới cùng.

.box {
	margin: 50px 25px 60px;
border: 1px solid red;
}

Mã của chúng tôi trả về:

Như bạn có thể thấy, các cạnh bên trái và bên phải của hộp bên trong của chúng ta có cùng giá trị lề — 25px —và các cạnh trên cùng và dưới cùng có lề riêng (50px và 60px, tương ứng).

Trong mã của chúng tôi, chúng tôi cũng xác định một đường viền màu đỏ xung quanh hộp bên trong của chúng tôi để minh họa vị trí áp dụng lề của chúng tôi. Chúng tôi cũng sử dụng lại mã từ ví dụ đầu tiên của chúng tôi để tạo một hộp màu xanh lam cho thấy khoảng trống lề của chúng tôi đã tạo xung quanh hộp bên trong.

Hai giá trị

Nếu bạn muốn một hộp có cùng giá trị lề cho đầu và cuối hộp và một giá trị khác cho cạnh phải và trái của hộp, bạn có thể sử dụng thuộc tính margin và chỉ định hai giá trị.

Thứ tự áp dụng các giá trị bạn chỉ định cho một phần tử là:

Giá trị đầu tiên là lề cho đầu và cuối hộp.
Giá trị thứ hai là lề cho bên phải và bên trái của hộp.

Giả sử bạn muốn tạo một hộp có lề dọc 50px và lề ngang 30px. Bạn có thể tạo hộp này bằng kiểu CSS sau:

.box {
	margin: 50px 30px;
border: 1px solid red;
}

Mã của chúng tôi trả về:

Trên cùng và dưới cùng của hộp của chúng tôi có lề 50px, và cả hai bên trái và phải đều có lề 30px.

Trong mã của chúng tôi, chúng tôi cũng chỉ định một đường viền màu đỏ xung quanh hộp bên trong của chúng tôi để giới thiệu kích thước của các lề của chúng tôi. Chúng tôi cũng sử dụng lại mã từ các ví dụ trước của chúng tôi để tạo một hộp màu xanh lam cho thấy khoảng trống mà lề của chúng tôi tạo ra giữa hộp bên trong và hộp bên ngoài.

Một giá trị

Nếu bạn muốn mọi cạnh của hộp có cùng một lề, bạn chỉ cần chỉ định một giá trị khi sử dụng thuộc tính margin. Giá trị bạn chỉ định sẽ là lề được đặt xung quanh tất cả các đường viền cho một hộp.

Giả sử bạn muốn tạo một hộp với lề đơn 50px xung quanh tất cả các đường viền. Bạn có thể làm như vậy bằng cách sử dụng mã này:

.box {
	margin: 50px;
	border: 1px solid red;
}

Mã của chúng tôi trả về:

Mỗi đường viền của hộp của chúng ta có lề 50px. Chúng tôi đã chỉ định một đường viền màu đỏ xung quanh hộp của mình để cho thấy rằng các lề của chúng tôi được áp dụng bên ngoài đường viền của hộp và chúng tôi cũng tạo một hộp màu xanh lam, trong đó hộp màu đỏ của chúng tôi được đặt để minh họa rõ hơn các lề của chúng tôi.

Kế thừa ký quỹ

Giá trị kế thừa được sử dụng để kế thừa lợi nhuận từ phần tử mẹ.

Để đặt lề của hộp bên trong giống với lề cho hộp bên ngoài, chúng ta có thể sử dụng giá trị kế thừa. Giá trị kế thừa rất hữu ích vì nếu bạn thay đổi lề của phần tử mẹ, thì lề của phần tử con — hộp bên trong phần tử mẹ — sẽ tự động điều chỉnh.

Giả sử chúng ta đang thiết kế một hộp có phần tử mẹ có lề trái 50px. Chúng tôi muốn hộp chứa bên trong phần tử mẹ của chúng tôi có cùng giá trị lề. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

Mã của chúng tôi trả về:

Hộp bên ngoài của chúng ta (hộp có đường viền màu xanh lam) có lề trái là 50px. Ngoài ra, hộp bên trong của chúng ta (hộp có đường viền màu đỏ) có lề trái là 50px, được kế thừa từ phần tử mẹ của nó.

Ký quỹ tự động

Giá trị tự động được sử dụng để căn giữa một phần tử theo chiều ngang trong vùng chứa của nó.

Giá trị tự động sẽ làm cho một phần tử bên trong chiếm một chiều rộng nhất định dựa trên giá trị bạn đã xác định, sau đó không gian còn lại sẽ được chia giữa các lề trái và lề phải.

Giả sử bạn đã tạo một hộp có chiều rộng 250px bên trong hộp có chiều rộng 500px. Nếu bạn sử dụng từ khóa tự động để tạo lề, lề 125px sẽ được áp dụng cho cả bên trái và bên phải của hộp. Chúng tôi đã tính toán điều này bằng công thức sau:

(Outer Box Width - Inner Box Width) / 2

Trong trường hợp này, chúng tôi đã sử dụng tổng sau để tính cạnh của lợi nhuận được tạo tự động của chúng tôi:

(500 - 250) / 2

Câu trả lời cho vấn đề này là 125, là giá trị lề sẽ được áp dụng cho cả lề trái và lề phải của một hộp. Dưới đây là ví dụ về hộp sử dụng các kích thước này:

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

Mã của chúng tôi trả về:

Như bạn có thể thấy, một lề bằng nhau ở cả bên trái và bên phải của hộp bên trong của chúng ta (cái có viền đỏ) đã được tạo. Nói cách khác, hộp bên trong của chúng ta được căn giữa theo chiều ngang. Điều này là do chúng tôi đã sử dụng giá trị margin:auto để chỉ định số tiền ký quỹ cho hộp bên trong của chúng tôi.

Hộp bên trong của chúng tôi không có bất kỳ lề nào ở các cạnh trên cùng hoặc dưới cùng, bởi vì chúng tôi không chỉ định bất kỳ lề nào cho ví dụ của chúng tôi.

Kết luận

Thuộc tính lề CSS được sử dụng để tạo khoảng cách giữa đường viền của một phần tử và các phần tử khác trên trang web.

Với tham chiếu đến các ví dụ, hướng dẫn này thảo luận về cách sử dụng thuộc tính lề CSS và cách sử dụng bốn thuộc tính con của nó, để tạo khoảng cách giữa đường viền của phần tử và các phần tử khác trên trang web. Giờ đây, bạn đã được trang bị các công cụ cần thiết để bắt đầu sử dụng thuộc tính margin CSS như một người chuyên nghiệp!