Sự khác biệt giữa phần đệm và lề là gì? Phần đệm, lề và đường viền - chúng tôi đặt phần đệm bên trong và bên ngoài trong CSS, cũng như các khung cho tất cả các cạnh (trên, dưới, trái, phải)
Nguồn: Lề hoặc phần đệm?
Philip Sporrer.
Dịch: vl49.
Khi nào nên sử dụng lề và khi nào nên sử dụng phần đệm cho mục đích định dạng và nó có tạo ra sự khác biệt nào không?
Tôi đã trăn trở rất lâu để tìm kiếm những câu trả lời phù hợp. Chỉ sau khi viết rất nhiều mã CSS khủng khiếp, không thể giải mã được, kèm theo nhiều tác dụng phụ khác nhau, tôi mới có thể tự tin nói rằng mình đã tìm ra các quy tắc cơ bản nhất định liên quan đến các vấn đề được liệt kê ở trên.
Để rõ ràng, chúng ta hãy chuyển sang tình huống điển hình, điều này rất có thể quen thuộc với mọi nhà phát triển giao diện người dùng vào năm 2017. Chúng tôi có một mẫu thiệp đơn giản.
Trong ví dụ này, có thể phân biệt hai loại khoảng:
Điều rất quan trọng là phải hiểu ở đây rằng chúng ta đang xử lý hai khái niệm khác nhau không nên liên quan đến nhau khi được kết hợp. Nghĩa là, nếu tôi cần thay đổi khoảng cách giữa các thẻ và vùng chứa chúng, chẳng hạn như thành 24 pixel, thì điều này sẽ không ảnh hưởng đến khoảng cách giữa các thẻ.
Triển khai ví dụ bằng CSS?
Thực sự có hàng nghìn cách để tạo một mẫu như thế này bằng cách sử dụng lề và phần đệm, nhưng tôi muốn trình bày một cách thể hiện cách sử dụng đúng các thuộc tính lề và phần đệm. Hơn nữa, phương pháp này cho phép bạn thêm các thẻ khác trong tương lai.
Thùng đựng hàng (
phần đệm: 16px;
}
.card + .card (
lề: 0 0 0 8px;
}
Chỉ cần 2 bộ chọn và 2 quy tắc.
Dấu cộng thực hiện chức năng gì?
Biểu tượng + đại diện cho bộ chọn liền kề. Nó chỉ trỏ đến phần tử ngay sau phần tử được chỉ định trước bộ chọn này.
Như có thể thấy từ hình trên, trong trường hợp của chúng tôi, bộ chọn này sẽ chọn mọi thẻ đứng trước bất kỳ thẻ nào khác. Vì vậy, bằng cách sử dụng bộ chọn liền kề, chúng ta có thể đặt lề trái cho mỗi thẻ ngoại trừ thẻ đầu tiên.
Điều này có nghĩa là chúng ta có cơ hội thêm bất kỳ khối lượng bắt buộc thẻ, khoảng cách giữa chúng sẽ luôn là 8 pixel.
Mọi thứ hoạt động tốt cho đến khi chúng ta cần đặt thứ gì đó không phải là thẻ bên cạnh các thẻ. Vâng, hãy nói một nút "Thêm thẻ" ("Thêm thẻ"):
Đánh giá theo đoạn mã CSS hiện có, rất có thể chúng tôi sẽ không gán lớp .card cho thành phần mới đại diện cho nút vì nó không phải là một thẻ. Làm sao để? Có đáng để tạo một tên lớp bổ sung .add-card cho cái này, tên này có chứa quy tắc tương tự với thuộc tính lề như lớp .card không? Không, có một giải pháp tốt hơn.
Cú bị phá hủy *+* .
Nó trông như thế nào? Bất chấp sự liên tưởng buồn cười, phương pháp này hoạt động rất tốt và tôi đã sử dụng nó liên tục kể từ khi biết đến sự tồn tại của nó. Vậy chuyện này là sao? Dưới đây là mã CSS tương ứng:
Thùng đựng hàng (
phần đệm: 16px;
}
/* chà, bạn có nhận ra con cú bị phá não không? 😜 */
.container > * + * (
lề: 0 0 0 8px;
}
Như bạn có thể nhớ, bộ chọn trước đó áp dụng cho bất kỳ thẻ nào có trước thẻ khác. Bây giờ với sự trợ giúp của nó, chúng ta có thể định dạng mọi phần tử ngay trước đó là phần tử bất kỳ khác, tất nhiên bao gồm cả nút.
Sau cùng.
Tôi chân thành hy vọng rằng tài liệu được trình bày ở đây đã giúp bạn hiểu khi nào nên sử dụng phần đệm và khi nào nên sử dụng lề để phân tách nội dung trong một vùng chứa.
Do đó, tôi muốn trình bày để các bạn xem xét một dự án bút minh họa các ví dụ trên, cũng như những ví dụ đã được thử nghiệm trên trải nghiệm riêng hai quy tắc. Vì vậy, hãy sử dụng:
phần đệm- dành cho khoảng trống giữa vùng chứa và nội dung của nó.
lề- dành cho khoảng cách giữa các phần tử bên trong vùng chứa.
Hôm nay chúng ta sẽ tìm hiểu sự khác biệt giữa phần đệm HTML ( phần đệm) và lề (margin) trong CSS. Nhưng trước tiên, hãy hiểu cú pháp của họ. Có một số cách để viết các thuộc tính này: thông thường và viết tắt:
Phần đệm và lề trong CSS
Dạng ký hiệu thông thường cho các thuộc tính được đề cập sẽ dễ hiểu hơn vì nó giống với tất cả các ký hiệu kiểu khác:
Nhập thường xuyên:
phần đệm trên cùng: 10px; phần đệm bên phải: 20px; phần đệm dưới cùng: 10px; phần đệm bên trái: 20px;
Mặt khác, cách viết tắt CSS kết hợp tất cả các thuộc tính này thành một thuộc tính chung " phần đệm«.
Mục nhập ngắn gọn:
phần đệm: 10px 20px 40px 10px;
Phần đệm và lề có bốn giá trị: trên, phải, dưới và trái. Ký hiệu viết tắt ở trên cũng chỉ định bốn giá trị, cách nhau bằng dấu cách. Giá trị đầu tiên trong bốn giá trị là thụt lề trên cùng, sau đó thụt lề phải, dưới cùng ( đệm HTML dưới cùng) và ở bên trái:
phần đệm: TRÊN PHẢI DƯỚI TRÁI; (phần đệm: trên cùng bên phải dưới cùng bên trái)
Mục nhập này có thể được giảm xuống còn ba giá trị nếu phần đệm/lề bên trái và bên phải giống nhau. Ví dụ: nếu lề trên là 30px, lề trái và phải là 10px, lề dưới là 40px thì bạn có thể sử dụng ký hiệu sau:
phần đệm: 30px 10px 40px;
Chúng tôi giảm nó xuống còn hai giá trị!
Nếu phần đệm/lề trên và dưới giống nhau và phần đệm/lề bên phải và bên trái cũng giống nhau thì chỉ có thể chỉ định hai giá trị. Trong ví dụ này, chúng ta có phần đệm trên và dưới là 10px, phần đệm bên trái và bên phải là 20px. CSS của chúng ta sẽ trông như thế này:
phần đệm: TRÊN/DƯỚI PHẢI/TRÁI; (phần đệm: trên/dưới bên phải/trái) phần đệm: 10px 20px;
Chỉ có một ý nghĩa!
Của chúng tôi phiên bản mới nhất tốc ký cho phần đệm và lề HTML chỉ chứa một giá trị. Ký hiệu này có thể được sử dụng khi tất cả thụt lề ( trên, dưới, phải và trái) có cùng ý nghĩa. Nếu chúng ta muốn tất cả các cạnh có khoảng đệm 20px, CSS sẽ trông như thế này:
Khi nào nên sử dụng định dạng ghi nào? Ví dụ: nếu tôi chỉ muốn cung cấp cho một phần tử phần đệm dưới cùng, tôi sẽ sử dụng ký hiệu thông thường vì tôi chỉ cần áp dụng thuộc tính cho một bên: đệm-bottom: 30px ;
Cách làm việc với PADDING và MARGIN
Có một sự khác biệt đáng chú ý giữa hai thuộc tính này. Phần đệm được sử dụng để xác định không gian trong vùng chứa của phần tử HTML. Lề được sử dụng để xác định khoảng cách xung quanh đường viền bên ngoài của các phần tử.
Hãy tưởng tượng đệm đang khoác một chiếc áo khoác mùa đông cho bạn. Chiếc áo khoác là một phần của bạn, nhưng nếu tôi ném sơn vào bạn, nó sẽ bao phủ một vùng rộng hơn so với khi bạn không mặc chiếc áo khoác đó.
Bạn cũng có thể coi phần đệm như là phần đệm trong thùng các - tông. Khi bạn đổ đầy bọt vào hộp, bạn dùng nó để giữ đồ bên trong cách xa mép hộp. Phần đệm trong CSS cũng làm điều tương tự.
Bây giờ hãy coi lề như một trường lực vô hình xung quanh bạn. Trường lực giữ những thứ khác tránh xa bạn. Quay trở lại ví dụ về áo khoác và sơn, nếu tôi ném sơn vào bạn và nó có thể xuyên qua trường lực thì nó vẫn chỉ bao phủ bạn và áo khoác của bạn.
PADDING và MARGIN trên ví dụ về một trang web
Hãy xem xét các thuộc tính bằng cách sử dụng các ví dụ có phần tử. Chúng ta sẽ bắt đầu bằng một đoạn văn (thẻ
), sau đó thêm màu nền cho nó và thêm phần đệm 30px ở mỗi bên.
Bên dưới bên trái, bạn có thể thấy đó là một đoạn văn có khoảng đệm 30px xung quanh. Trong hình bên phải tôi đã sử dụng công cụ của Google Chrome để hiển thị nơi phần đệm HTML bắt đầu/kết thúc cho phần tử này. Màu xanh lá cây trong hình bên dưới là phần đệm được đặt xung quanh vùng chứa. Màu nền xanh đậm lấp đầy khu vực bên trong:
Bây giờ hãy thêm lề vào đoạn văn. Tôi sẽ thêm phần đệm trên và dưới 30px, cũng như 20px bên trái và bên phải. Hình ảnh bên trái bên dưới cho thấy đoạn này đã thay đổi như thế nào từ lề. Chiều rộng thực tế của hình ảnh đã trở nên nhỏ hơn do lề bị đẩy ra xa khỏi viền của hình ảnh khác phần tử HTML. Ở bên phải bạn có thể thấy điều đó màu cam– đây là lề xung quanh phần tử. lề luôn nằm ngoài phần đệm và nền màu xanh đậm không mở rộng vào vùng lề:
Nếu bạn vẫn còn bối rối về cách sử dụng phần đệm và lề HTML thì đã đến lúc thử nghiệm! Bạn càng sử dụng nhiều Thuộc tính CSS và thay đổi giá trị của chúng, bạn sẽ càng hiểu rõ hơn cách chúng hoạt động.
Bản dịch của bài viết “ ĐỆM CSS VS. KÝ LỢI NHUẬN VÀ CÁCH SỬ DỤNG CHÚNG” đã được chuẩn bị bởi nhóm dự án thân thiện.
Tốt xấu
- Hướng dẫn
Mục đích của bài viết này không phải là làm phức tạp những điều đơn giản mà là tập trung sự chú ý vào các tiêu chuẩn nổi tiếng mà bằng cách nào đó đã bị lãng quên. Điều quan trọng là duy trì cấu trúc có ý nghĩa trong tất cả các khía cạnh của bố cục và điều quan trọng không kém là tuân thủ cấu trúc đó trong phần thụt lề của bạn. Và một trong những nguyên tắc chính của bố cục là tính linh hoạt. Cụ thể là khả năng dễ dàng thực hiện bất kỳ thay đổi nào mà không vi phạm bất cứ điều gì. Xử lý đúng cách với lề và phần đệm đóng một vai trò rất lớn trong vấn đề này.
Các nguyên tắc sau đây được triển khai trong môi trường của các thành phần định vị trên trang. Chúng cũng được sử dụng trong các yếu tố trang trí. Nhưng không quá phân loại.
Nguyên tắc cơ bản:
- Việc thụt đầu dòng được trao cho phần tử cuối cùng có thể có trong ngôi nhà.
- Không thể đặt thụt lề cho các phần tử độc lập (khối BEM).
- Đối với phần tử cuối cùng của nhóm, thụt lề được đặt lại về 0 (luôn luôn).
Thụt lề đi từ phần tử trước đến phần tử tiếp theo.
(các) lề được đặt từ phần tử trước sang phần tử tiếp theo, từ phần tử thứ nhất đến phần tử thứ hai, từ trên xuống dưới, từ trái sang phải.
Điều này có nghĩa là các thuộc tính như lề trái và lề trên không được sử dụng(không phải không có ngoại lệ). Với phần đệm, mọi thứ hơi ngược lại một chút (ngoại trừ việc nó được sử dụng cho mục đích trang trí, tăng diện tích liên kết, v.v.). Khi một khối cần phần đệm ở trên cùng hoặc bên trái, nó sẽ lấy nó từ phần đệm trên cùng và phần đệm bên trái của khối cha.
Các vết lõm đi theo hướng dòng chảy của ngôi nhà trên cây, khối không tự đẩy mình.
Ban đầu, anh ta ở một vị trí tĩnh và nhận một số tác động mà người khác phải trả giá.
Phần thụt lề được trao cho phần tử cuối cùng có thể có trong ngôi nhà
(các) lề chỉ được đặt giữa các phần tử liền kề của ngôi nhà trên cây.Trong ví dụ có 3 danh sách, theo cấu trúc sau:
- Xa, xa, vượt quá lời nói.
Việc thụt lề được thực hiện không phải gây thiệt hại cho các phần tử con mà gây thiệt hại cho các phần tử lân cận.
Trong trường hợp này, .main-section__item là phần cuối cùng có thể được thụt vào để phân tách các danh sách. Hiệu ứng tương tự có thể đạt được bằng cách thụt lề một div, một danh sách, một dòng hoặc một liên kết, nhưng điều này sẽ không đúng.
Ví dụ này khá đơn giản. Nhưng nếu bạn tưởng tượng một cái lồng lớn hơn nhiều, nơi có ai đó rải rác những vết lõm, khi một số lề bị xẹp xuống. và một số được thêm vào phần đệm.
tiêu đề trong một phần bảy từ
Nếu chúng ta lấy ví dụ về một tiêu đề và bạn cần thụt lề tiêu đề ở trên cùng. thì phần tử cuối cùng sẽ là phần và phần đệm trên cùng được đặt cho nó, (các) lề theo mặc định luôn cần được đặt lại.
nhất lý do đơn giảnđiều đó đáng để gắn bó nguyên tắc này, điều này giúp bạn dễ dàng tìm thấy thụt lề trong tương lai cho bạn hoặc cho người sẽ làm việc với bố cục của bạn trong tương lai. Đây là về sự thuận tiện.
Các vấn đề thực sự có thể phát sinh khi bố cục có cấu trúc thụt lề kém được hiển thị động hoặc trùng lặp.
Không thể đặt thụt lề cho các phần tử độc lập (khối BEM)
Không bao giờ thụt lề các phần tử có thể được sử dụng nhiều lần. Ngay cả khi bạn không tuân theo các phương pháp, hãy giữ mọi thứ theo quan điểm. Có giấy gói cho việc này. Bao bọc là tốt. Hoặc các lớp học bổ sung.Nếu bạn cần thụt lề một khối. Không có thành kiến, điều này được thực hiện bằng cách sử dụng:
- Kế thừa thông qua phần tử (nếu bạn kéo khối này ra khỏi phần tử sẽ không có thụt lề và bạn chỉ cần đặt nó ở một nơi khác).
- Thêm một lớp (bạn có thể biến một khối thành một phần tử).
- Wrapper (giống như một khối có vai trò, chỉ có vai trò định vị).
Phần tử cuối cùng của nhóm có phần thụt lề được đặt lại về 0 (luôn luôn)
Hãy lấy một danh sách và một hình ảnh làm ví dụ.Cái này menu ngang và logo (vì lý do nào đó lại ở bên phải).
Đối với li cuối cùng, vết lõm được đặt lại về 0. Và việc thụt lề được thực hiện giữa các phần tử liền kề ul và img. Những gì đã được thảo luận trong nguyên tắc thứ hai.
Hãy lấy một ví dụ khác:
Chúng tôi quan tâm đến lề giữa các tin tức được đặt.blog-preview__item ( lề-bottom: 20px; ). Lề cuối cùng được đặt lại về 0 và phần thụt lề dưới cùng được tạo bằng cách đệm blog-preview . Những gì đã được thảo luận trong nguyên tắc thứ hai.
Thường xuyên hơn các lớp giả khác, bạn nên sử dụng:last-child.
Item:not(:last-child) ( lề-bottom: 20px; ) // hoặc // .item ( // các kiểu khác // lề-bottom: 20px; &:last-child ( lề-bottom: 0; ) ) // hay Margin-top, ý chính ở đây không nằm ở hướng lề mà ở chỗ không thừa // .item + .item (margin-top: 20px; ) // hoặc // .item ( / / các kiểu khác // & + & ( lề-top: 20px; ) )
Ngoại lệ
Tất nhiên, có những trường hợp đặc biệt, những nhiệm vụ không hề nhỏ và những sắc thái không thể tuân thủ những nguyên tắc này, nhưng nếu không thì bạn nên cố gắng tạo ra những vết lõm lý tưởng để làm cho bố cục gọn gàng nhất có thể.
tái bút Tôi khuyên bạn nên đọc ấn phẩm
Từ tác giả: Khi tôi mới bắt đầu học CSS, tôi cứ nhầm lẫn về lề và phần đệm. Chúng có vẻ rất giống nhau và trong một số trường hợp cũng cho kết quả tương tự. Trong hướng dẫn này, bạn sẽ thấy sự khác biệt giữa lề và phần đệm CSS cũng như cách các thuộc tính này ảnh hưởng đến khoảng cách giữa các thành phần trên trang. Chúng ta cũng sẽ thảo luận về việc thu hẹp lợi nhuận và sử dụng các đơn vị đo lường khác nhau khi tạo các trang web đáp ứng. Chúng tôi sẽ kết thúc bài viết bằng một số mẹo về bố cục sử dụng lề và phần đệm.
Mô hình khối
Các phần tử trong CSS được biểu diễn dưới dạng hộp hình chữ nhật. Kích thước của khối hình chữ nhật được xác định bởi các thuộc tính của phần tử: nội dung, phần đệm, khung, lề.
Vùng nội dung của phần tử nằm ở giữa. Tiếp theo, phần đệm bao quanh khu vực nội dung. Khung bao quanh phần đệm và lề là lớp bên ngoài, tức là. nó nằm ngoài phần tử. Để hiểu rõ hơn những gì chúng ta đang nói đến, dưới đây là một sơ đồ.
Như bạn có thể thấy từ sơ đồ, phần đệm là một lớp mở rộng một phần tử từ mép ngoài của vùng nội dung đến mép trong của khung. Thuộc tính này kiểm soát khoảng cách giữa đường viền của phần tử và nội dung của nó. Phần đệm ảnh hưởng đến kích thước của một phần tử trên một trang nhưng nó không ảnh hưởng đến khoảng cách giữa các phần tử trên một trang.
Nếu bạn cần tăng hoặc giảm khoảng cách giữa các phần tử, hãy sử dụng lề. Thuộc tính lề không ảnh hưởng đến kích thước của phần tử dưới bất kỳ hình thức nào.
Điều quan trọng cần nhớ là kích thước của tất cả các khối trên trang web phụ thuộc vào mô hình khối được sử dụng. Có hai mô hình khối: mô hình khối W3C, mô hình khối truyền thống.
Theo mô hình khối W3C, chiều rộng của một phần tử được tính từ nội dung của khối mà không tính đến phần đệm và lề. Khoảng đệm và đường viền được thêm vào phía trên các kích thước đã chỉ định, điều này có thể dẫn đến những hậu quả không mong muốn cho bố cục trang.
Ví dụ: hãy lấy một khối có chiều rộng 200px và chiều cao 200px, đệm 10px ở tất cả các cạnh và đường viền 2px ở tất cả các cạnh. Trình duyệt không nhìn thấy khối 200px. Trình duyệt tính toán không gian ngang cần thiết để hiển thị khối và nó là 224px: 200(width)+2(left border)+10(left đệm)+10(right đệm)+2(right border)=224px. Vì đây là hình vuông nên chiều cao cũng sẽ là 224px.
Mặt khác, mô hình khối truyền thống lấy tổng nội dung, phần đệm và đường viền làm chiều rộng. Điều này có nghĩa là nếu khối của bạn rộng 200px, trình duyệt sẽ tính toán không gian ngang cần thiết để hiển thị nó và nó sẽ là 200px, bao gồm cả phần đệm và đường viền. Kết quả dễ dự đoán hơn và dễ làm việc hơn.
Theo mặc định, tất cả các trình duyệt đều sử dụng mô hình khối W3C. Mô hình có thể được đặt thủ công bằng thuộc tính kích thước hộp. Hai giá trị được chấp nhận: content-box (W3C) và border-box (model truyền thống). Mô hình truyền thống trực quan hơn, điều này khiến nó trở nên phổ biến nhất đối với các nhà phát triển web.
Dưới đây là cách sử dụng kích thước hộp để sử dụng mô hình truyền thống trong dự án của bạn:
html ( kích thước hộp: hộp viền; ) *, *:trước, *:sau ( kích thước hộp: kế thừa; )
html ( box - sizing : đường viền - hộp ; * , * : trước , * : sau ( kích thước hộp: kế thừa; |
Nếu bạn nhớ mọi thứ nhanh hơn khi tự mình làm mọi việc, hãy thử trải nghiệm bản demo tương tác thú vị này của Guy Routledge.
Đặt lề và phần đệm
Bạn có thể sử dụng các thuộc tính đệm trên, đệm phải, đệm dưới và đệm trái để kiểm soát khoảng đệm trên cả bốn cạnh của một phần tử. Phần đệm cũng có thể được chỉ định thông qua một thuộc tính tốc ký. Nếu một giá trị đệm duy nhất được viết, CSS sẽ sử dụng nó để xác định khoảng đệm cho cả 4 cạnh:
/* cả 4 cạnh */ đệm: 10px;
Nếu 3 giá trị được hiển thị, giá trị đầu tiên chịu trách nhiệm về phần trên, giá trị thứ hai dành cho bên trái và bên phải và giá trị thứ ba dành cho phần dưới cùng:
/* đầu | ngang | đáy */ phần đệm: 1em 20px 2em;
Nếu cả 4 giá trị đều được trình bày thì mỗi giá trị lần lượt chịu trách nhiệm về trên, phải, dưới và trái:
/* đầu | đúng | dưới cùng | trái */ phần đệm: 10px 10% 2em 15%;
Trong demo bên dưới, nền màu cam là vùng nội dung cho các phần tử khác nhau, vùng màu trắng giữa khung và nội dung là phần đệm:
Lề bên ngoài, giống như phần đệm, có thể được kiểm soát ở cả 4 phía bằng cách sử dụng các thuộc tính lề trên, lề phải, lề dưới và lề trái. Bạn cũng có thể đặt lề cho cả 4 cạnh cùng một lúc bằng thuộc tính tốc ký.
/* cả 4 cạnh */ lề: 10px; /* dọc | ngang */ lề: 2em 4em; /* đầu | ngang | đáy */ lề: 2em auto 2em; /* đầu | đúng | dưới cùng | trái */ lề: 10px 10% 2em 15%;
Những gì cần nhớ
Sử dụng đúng đơn vị đo
Khi làm việc với phần đệm và lề, hãy tránh các đơn vị đo lường tuyệt đối. Các đơn vị như vậy không thích ứng với những thay đổi về kích thước phông chữ và chiều rộng màn hình.
Giả sử bạn đặt chiều rộng của phần tử là 50% và lề là 15px. Với chiều rộng 1200px, chiều rộng của phần tử sẽ là 600px và lề sẽ là 15px. Ở chiều rộng 769px, chiều rộng của phần tử sẽ là 384px và lề vẫn là 15px.
Chiều rộng của phần tử đã thay đổi 36% nhưng lề của nó vẫn giữ nguyên. Trong hầu hết các trường hợp, đây không phải là điều tốt nhất một vấn đề lớn. Tuy nhiên, nếu bạn đặt lề của thành phần theo tỷ lệ phần trăm, bạn sẽ có nhiều quyền kiểm soát hơn đối với bố cục trang trên tất cả các màn hình. Mọi thứ sẽ trông cân xứng mà không có sự thay đổi đột ngột về giá trị lề và phần đệm được áp dụng.
Tương tự như vậy, bạn có thể muốn thêm phần đệm vào các thành phần văn bản trên trang. Trong hầu hết các trường hợp, bạn muốn phần đệm tỷ lệ với kích thước phông chữ trên phần tử. Điều này là không thể thực hiện được trong các đơn vị tuyệt đối. Tuy nhiên, nếu bạn đặt phần đệm thành em, nó sẽ tự động điều chỉnh theo kích thước phông chữ. Bản demo bên dưới cho thấy việc mở rộng quy mô đang hoạt động.
Cách trình duyệt tính toán lề và phần đệm cho các đơn vị đo lường khác nhau
Các trình duyệt tính toán giá trị lề và phần đệm cuối cùng khác nhau tùy thuộc vào đơn vị đo lường.
Lề và phần đệm, được chỉ định dưới dạng phần trăm, được tính tương ứng với chiều rộng của vùng chứa. Nghĩa là, phần đệm 5% sẽ bằng 5px nếu chiều rộng vùng chứa là 100px hoặc 50px nếu chiều rộng vùng chứa là 1000px. Đừng quên rằng giá trị trên và dưới cũng được tính dựa trên chiều rộng của vùng chứa.
Trong trường hợp của em, lề và phần đệm dựa trên kích thước phông chữ của phần tử này. Trong bản demo trước, khoảng đệm trên ba thành phần văn bản dưới cùng là 1em. Bởi vì kích cỡ khác nhau phông chữ, giá trị phần đệm được tính toán sẽ luôn khác nhau.
Ngoài ra còn có 4 đơn vị viewport đo vw, vh, vmin và vmax. Trong trường hợp này, giá trị lề và phần đệm sẽ phụ thuộc vào khung nhìn. Ví dụ: phần đệm 5vw sẽ bằng 25px với chiều rộng khung nhìn là 500px và phần đệm 10vw sẽ bằng 50px trên cùng một khung nhìn. Bạn có thể nghiên cứu các đơn vị đo lường này chi tiết hơn trong bài viết trên trang web SitePoint “Chế độ xem CSS của các đơn vị đo lường: Bắt đầu nhanh”.
Nếu bạn là người mới bắt đầu, việc biết cách các đơn vị này hoạt động sẽ giúp bạn nhanh chóng hiểu lý do tại sao phần đệm và lề trên các phần tử HTML thay đổi tùy thuộc vào kích thước của phần tử gốc, phông chữ hoặc thậm chí là khung nhìn. Và điều này sẽ cung cấp cho bạn khả năng kiểm soát bố cục của bạn.
Sự sụp đổ của lề
Bạn cũng cần biết về khái niệm thu hẹp lợi nhuận. Trong một số trường hợp nhất định, lề trên và lề dưới của hai phần tử có thể thu gọn lại thành một. Hiện tượng này được gọi là sụp đổ lợi nhuận.
Giả sử bạn có hai phần tử nằm dưới phần tử kia, tức là ở cùng cấp độ. Nếu bạn đặt lề dưới là 40px cho phần tử đầu tiên và lề trên là 25px cho phần tử thứ hai thì tổng lề giữa các phần tử sẽ không bằng 65px. Mức thụt lề sẽ bằng giá trị của lề lớn hơn, tức là. 40px.
Tương tự như vậy, lề có thể thu hẹp giữa cha mẹ và con đầu tiên hoặc con cuối cùng. Điều này xảy ra nếu không có đường viền, phần đệm hoặc nội dung nội tuyến ngăn cách lề con và lề cha. Trong trường hợp này, nếu không có phần đệm hoặc đường viền trên phần cha, lề phần tử con sẽ "chảy" từ cha mẹ.
Hành vi này có thể được sửa chữa. Để làm điều này, bạn cần thêm một rào cản giữa lề cha và con. Bản demo bên dưới cho thấy cách thêm đường viền hoặc phần đệm vào phần tử gốc có thể khắc phục sự cố.
Trong trường hợp biên độ âm giá trị cuối cùng biên độ thu gọn bằng tổng của biên độ dương với biên độ âm nhỏ nhất. Bạn có thể nghiên cứu chủ đề thu hẹp lợi nhuận chi tiết hơn trong bài viết “Thu hẹp lợi nhuận” của Adam Roberts.
Những cách thú vị để sử dụng lề và phần đệm
Đôi khi lề và phần đệm có thể giúp giải quyết các vấn đề về bố cục. Dưới đây là một số ví dụ:
Duy trì tỷ lệ khung hình trong hình ảnh
Thông thường, hình ảnh trên một trang có tỷ lệ khung hình khác nhau. Nếu bạn cần hiển thị tất cả hình ảnh có cùng tỷ lệ khung hình, điều này sẽ giúp bạn Phần đệm CSS.
Để thực hiện việc này, bạn cần đặt chiều cao của phần tử gốc bằng 0 và thuộc tính phần đệm trên cùng của phần tử gốc phải bằng giá trị tỷ lệ khung hình, được biểu thị bằng phần trăm.
Ví dụ: tỷ lệ khung hình 16:9 đạt được bằng cách đệm: 56,25% 0 0 0. Giá trị 56,25 thu được bằng (9/16)*100. Sử dụng phương pháp này, bạn có thể tính tỷ lệ phần trăm đệm cho bất kỳ tỷ lệ khung hình nào khác.
Phần kết luận
Nếu bạn mới bắt đầu học CSS, tôi hy vọng hướng dẫn này đã giúp bạn hiểu được sự khác biệt giữa lề và phần đệm. Bạn cần học cách đặt lề và phần đệm bằng cách sử dụng chữ viết tắt và đơn vị đo lường thích hợp. Ở phần trước tôi đã trình bày hai những cách thú vịáp dụng các thuộc tính trong bố cục, đồng thời cung cấp cho bạn các liên kết đến các tài nguyên để tìm hiểu thêm. Nếu bạn có các mẹo khác về lề và phần đệm CSS, vui lòng đăng chúng trong phần bình luận.
Sự miêu tả
Đặt lượng khoảng đệm từ mỗi cạnh của phần tử. Lề là khoảng cách từ đường viền của phần tử hiện tại đến đường viền bên trong của phần tử cha của nó (Hình 1).
Cơm. 1. Thụt lề từ cạnh trái của phần tử
Nếu phần tử không có phần tử cha, phần đệm sẽ là khoảng cách từ cạnh của phần tử đến cạnh của cửa sổ trình duyệt, có tính đến việc bản thân cửa sổ cũng có phần đệm được đặt theo mặc định. Để loại bỏ chúng, bạn nên đặt giá trị lề cho bộ chọn
bằng không.thuộc tính ký quỹ cho phép bạn đặt mức thụt lề cho tất cả các cạnh của một phần tử cùng một lúc hoặc chỉ xác định nó cho các cạnh được chỉ định.
Cú pháp
lề: [giá trị | quan tâm | tự động] (1,4) | thừa kế
Giá trị
Bạn có thể sử dụng một, hai, ba hoặc bốn giá trị, cách nhau bằng dấu cách. Hiệu ứng phụ thuộc vào số lượng giá trị và được hiển thị trong bảng. 1.
Lượng thụt lề có thể được chỉ định bằng pixel (px), phần trăm (%) hoặc các giá trị được chấp nhận khác. Đơn vị CSS. Giá trị có thể là số dương hoặc số âm.
Tự động Chỉ định rằng kích thước thụt lề sẽ được trình duyệt tự động tính toán. kế thừa Kế thừa giá trị của cha mẹ.
HTML5 CSS2.1 IE Cr Op Sa Fx
Kết quả ví dụ này thể hiện trong hình. 2.
Cơm. 2. Áp dụng thuộc tính ký quỹ
Mô hình đối tượng
document.getElementById("elementID").style.margin
Trình duyệt
Internet Explorer 6 ở chế độ quirk không hỗ trợ căn giữa khối bằng quy tắc tự động lề: 0. Ngoài ra còn có một lỗi trong trình duyệt này với việc tăng gấp đôi giá trị phần đệm bên trái hoặc bên phải cho các phần tử nổi được lồng trong phần tử cha. Biên độ liền kề với phía cha mẹ được nhân đôi. Vấn đề thường được giải quyết bằng cách thêm display: inline vào phần tử nổi.
Các phiên bản Internet Explorer lên đến 7.0 không hỗ trợ giá trị kế thừa.
Ghi chú
bạn khối phần tử nằm cạnh nhau theo chiều dọc, hiệu ứng thu gọn được quan sát thấy khi các vết lõm không được tổng hợp mà kết hợp với nhau. Bản thân sự thu gọn hoạt động trên hai hoặc nhiều khối (một khối có thể được lồng vào trong một khối khác) với các vết lõm ở trên cùng hoặc dưới cùng, trong khi các vết lõm liền kề được kết hợp thành một. Đối với phần đệm bên trái và bên phải, việc thu gọn không bao giờ được áp dụng.
Thu gọn không hoạt động:
- đối với các phần tử có thuộc tính đệm được đặt ở phía thu gọn.
- đối với các phần tử có ranh giới được xác định ở phía sụp đổ;
- trên các phần tử với định vị tuyệt đối, I E. những người có vị trí được đặt ở mức tuyệt đối ;
- trên các phần tử nổi (trong đó thuộc tính float được đặt thành left hoặc right );
- Vì phần tử nội tuyến;
- Vì .
