Nếu bạn là người mới đến với CSS, bạn có thể đã nghe thấy các chữ margin và padding nhưng không chắc chắn rằng chúng có nghĩa là gì, hoặc cách sử dụng chúng trong các thiết kế website của bạn. Những khái niệm này làm những điều tương tự trong CSS. Tuy nhiên, chúng không hoàn toàn giống nhau, và có những khác biệt cơ bản quan trọng trong cách sử dụng chúng.
Một khi bạn đã hiểu rõ về sự khác biệt giữa đường viền và lớp lót, bạn sẽ có thể đưa ra các quyết định thiết kế tốt hơn cho trang web của mình. Vậy hãy nhìn vào hai tính chất này và chúng làm gì. Vâng bao gồm nhiều ví dụ trực quan để minh hoạ cách các thành phần quan trọng của CSS hoạt động.
Sự khác biệt giữa lớp viền và lớp đệm trong CSS là gì?
Trong CSS, một cạnh là không gian xung quanh một đường biên các yếu tố, trong khi lớp đệm là không gian giữa đường biên các yếu tố và nội dung các yếu tố. Nói cách khác, thuộc tính biên điều khiển không gian bên ngoài một nguyên tố, và thuộc tính đệm điều khiển không gian bên trong một nguyên tố.
Hãy khám phá các cạnh trước, hãy xem xét các yếu tố được minh hoạ bên dưới, có cạnh 10 điểm :.
Điều này có nghĩa là sẽ có ít nhất 10 điểm không gian giữa yếu tố này và các yếu tố trang liền kề mà mép đẩy ra phía bên cạnh của nó. Nếu chúng ta đặt nhiều yếu tố này lại với nhau, chúng ta sẽ thấy cách các mép tạo ra khoảng trống giữa chúng, tạo cho chúng không gian để thở :.
Mặt khác, đệm nằm bên trong đường viền của một nguyên tố. Yếu tố bên dưới có lớp đệm 10px ở phía bên trái và bên phải, và lớp đệm 15px ở phía trên và phía dưới :.
Để tạo khoảng trống, lớp đệm sẽ tăng kích cỡ các yếu tố hoặc thu nhỏ nội dung bên trong. Theo mặc định, kích thước của yếu tố sẽ tăng lên. Nếu bạn muốn tạo khoảng trống bằng cách thu nhỏ nội dung, hãy đặt tính năng kích cỡ hộp vào border-box ( i ). E. Kích cỡ hộp : border-box ).
Khi nào để sử dụng Margin và đệm
Nói chung, hãy dùng các mép để điều chỉnh khoảng cách của một nguyên tố liên quan đến một nguyên tố khác ( i ). E là một khoảng cách liên quan đến một khoảng cách khác trên trang ) và đệm khi bạn điều chỉnh vẻ ngoài của một yếu tố riêng biệt ( i. E là lượng điểm giữa mép của một chia và văn bản bên trong nó ).
Khi cậu điều chỉnh bố cục thiết kế của cậu, bạn cần xác định xem có nên thay đổi các mép hoặc lớp lót để đạt được hiệu ứng thị giác mong muốn hay không. Trong phần này, hãy đưa ra một số cách sử dụng phổ biến cho mỗi tài sản, bắt đầu với các cạnh.
Sử dụng cho Margins
Các mép của CSS xác định không gian xung quanh một yếu tố, do đó, các mép có thể được sử dụng để.
Tóm Tắt
1. Thay đổi vị trí yếu tố trên trang
Mép của CSS có thể di chuyển một yếu tố lên hoặc xuống trên trang, cũng như bên trái hoặc bên phải. Nếu chiều rộng của trang được cố định, việc tập trung một phần tử theo chiều ngang là đơn giản : Chỉ cần gán mép giá trị : auto.
Xem Pen CSS Margin vs. Padding-vary : auto của Christina Perricone (@ Hubspot ) trên CodePen.
2. Thiết lập khoảng cách giữa các yếu tố gần đó
Các cạnh xác định lượng không gian giữa các yếu tố liền kề, hoặc không gian trắng. Không gian trắng rất quan trọng để làm cho các trang web dễ hiểu về hình ảnh. Ví dụ, dùng mép để thêm không gian giữa các hình ảnh hoặc giữa một hình ảnh và mô tả văn bản bên dưới :.
Xem Pen CSS Margin vs. Padding – Image Whitespace của Christina Perricone (@ Hubspot ) trên CodePen.
3. Nguyên tố trùng lặp
Ngược lại, một giá trị rìa âm cho phép bạn chồng lên các yếu tố trang.Điều này có thể hữu ích khi bạn cố gắng đạt được hiệu ứng lưới bị hỏng.
Xem Pen CSS Margin vs. Padding- Broken Grid effect của Christina Perricone (@ Hubspot ) trên CodePen.
Sử dụng cho đệm
Lớp lót CSS xác định nội dung trông như thế nào trong nội dung tương ứng của nó Bạn có thể thay đổi lớp lót CSS để đạt được các hiệu ứng sau :.
1. Thêm khoảng trống giữa nội dung và ranh giới
Đây là cách dùng phổ biến nhất của đệm, và nó hữu ích để tạo khoảng trống bên trong các yếu tố của bạn.
Xem Pen CSS Margin vs. Padding-padding sizes của Christina Perricone (@ Hubspot ) trên CodePen.
2. Thay đổi kích cỡ của yếu tố
Khi bạn tăng giá trị đệm, nội dung sẽ giữ nguyên kích cỡ, nhưng bạn sẽ thêm nhiều không gian xung quanh nội dung. Điều này rất hữu ích cho các yếu tố tương tác, như các nút, khi bạn muốn mở rộng khu vực có thể nhấp vào.
Mô hình hộp CSS
Để xem các cạnh và lớp đệm hoạt động như thế nào để thiết lập khoảng trống xung quanh nội dung các yếu tố, chúng ta cũng có thể sử dụng mô hình hộp CSS. Mô hình hộp CSS được sử dụng cho thiết kế và bố cục trang. Về cơ bản, mỗi phần HTML trong một tài liệu được bọc bên trong một hộp xếp lớp bao gồm mép, mép, lớp đệm và nội dung :.
Việc áp dụng chiều cao và chiều rộng vào các yếu tố của bạn sẽ dễ dàng hơn một khi bạn đã hiểu về mô hình hộp CSS. Để đảm bảo sự sắp xếp phù hợp, bạn chỉ cần làm một số phép toán đơn giản. Tuy nhiên, nếu bạn nhầm lẫn về cách làm việc của mẫu hộp, bạn có thể kết thúc với một bố cục mơ hồ. Để tìm hiểu thêm về khái niệm này, hãy xem hướng dẫn của chúng tôi về mô hình hộp CSS.
SS Margin với Padding với Border
Đường viền là lớp của mô hình hộp CSS nằm giữa mép và lớp lót. Theo mặc định, đường viền không có chiều rộng nào, nhưng bạn có thể đặt nó với tài sản đường viền CSS.
Đường viền và đệm luôn là các bộ phận của một yếu tố, ngay cả khi không có đường viền có thể nhìn thấy được, hình ảnh này minh hoạ một trường hợp như vậy :.
Điều này có thể hơi khó hiểu đối với người mới, hai khối nội dung không có đường viền có thể nhìn thấy được, nhưng đường viền và lớp lót vẫn còn áp dụng.
Cách thêm Margins trong CSS
Mỗi phần tử HTML có bốn mép mà bạn có thể điều chỉnh : trên, phải, dưới và trái.
Để đặt cùng một giá trị rìa trên cả bốn cạnh của một nguyên tố, hãy sử dụng thuộc tính rìa. Để đặt rìa cho các cạnh cụ thể của một nguyên tố, hãy sử dụng các tính chất rìa trên, rìa bên phải, rìa bên dưới và rìa bên trái.
Xem Pen CSS Margin vs. Padding-Setting Margins 1 của Christina Perricone (@ Hubspot ) trên CodePen.
Bạn cũng có thể chỉ định thuộc tính rìa với hai, ba hoặc bốn giá trị phụ thuộc vào các cạnh bạn muốn đặt rìa vào. Nếu bạn muốn các cạnh đều ở mỗi bên, bạn chỉ cần áp dụng một giá trị. Nếu không, thứ tự các giá trị là rất quan trọng :.
- Hai giá trị áp dụng lên trên và dưới, rồi phải và trái
- Ba giá trị được áp dụng lên trên, rồi phải và trái, rồi dưới
- Bốn giá trị được áp dụng lên trên, rồi phải, rồi dưới, rồi trái
Xem Pen CSS Margin vs. Padding-Setting Margins 2 của Christina Perricone (@ Hubspot ) trên CodePen.
Mỗi giá trị có thể được biểu thị dưới dạng chiều dài cố định ( thường là px ), một phần trăm ( định nghĩa giá trị là một phần trăm của chiều rộng container của nó ), hoặc auto ( cho phép trình duyệt đặt biên ).
Cách thêm lớp đệm trong CSS
Giống như với mép, vải lót có bốn mặt được tuyên bố : trên, phải, dưới và trái.
Để đặt đệm trên tất cả các mặt, hãy sử dụng đệm có tính chất rút gọn. Để đặt đệm cho một bên cụ thể, bạn hãy sử dụng các tính chất trên đệm, bên phải, bên dưới và bên trái.
Xem Pen CSS Margin vs. Padding – Setting Padding 1 của Christina Perricone (@ Hubspot ) trên CodePen.
Khi sử dụng tính năng viết tắt của lớp đệm, bạn cũng có thể xác định lớp đệm bằng hai, ba hoặc bốn giá trị. Như với các cạnh, một giá trị sẽ được áp dụng trên cả bốn cạnh. Nếu không, thứ tự các giá trị được viết sẽ quyết định các cạnh mỗi bên áp dụng cho :.
- Hai giá trị áp dụng lên trên và dưới, rồi phải và trái
- Ba giá trị được áp dụng lên trên, rồi phải và trái, rồi dưới
- Bốn giá trị được áp dụng lên trên, rồi phải, rồi dưới, rồi trái
Xem Pen CSS Margin vs. Padding-Setting Padding 2 của Christina Perricone (@ Hubspot ) trên CodePen.
Mỗi giá trị có thể được biểu thị dưới dạng chiều dài cố định hoặc tỷ lệ phần trăm ( định nghĩa nó là tỷ lệ phần trăm chiều rộng của container ).
Đường rìa và lớp đệm của CSS : Tương tự, nhưng không giống nhau
Để loại bỏ các yếu tố trong CSS, bạn thường sẽ sử dụng các tính năng bên lề và lớp đệm. Hiểu được sự khác biệt là một bước tiến để làm chủ CSS. Bây giờ bạn cũng biết cách đặt cạnh và lớp đệm bằng cách sử dụng tài sản viết tắt, nhanh hơn nhiều so với việc xác định từng cạnh một cách độc lập.
Trong thiết kế và phát triển web, HTML và CSS đi đôi với nhau. HTML xác định cấu trúc nội dung và ngữ nghĩa, trong khi CSS thiết lập phong cách và bố cục. Nếu bạn là người mới bắt đầu, chúng tôi khuyến nghị bạn nên làm quen hoàn toàn với HTML trước khi thử dùng CSS. Tiếp tục quay lại với HTML khi bạn học thêm về CSS cho đến khi bạn hoàn toàn hiểu về HTML. Một khi bạn đã áp dụng CSS, HTML trở nên thú vị hơn nhiều.
Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 4 năm 2020 và đã được cập nhật về độ toàn diện.
