Css chênh lệch lề đệm. Thuộc tính PADDING và MARGIN và cách sử dụng chúng. Mô hình hộp trong CSS - phần đệm, lề và đường viền

Trong khi lang thang khắp các diễn đàn, tôi nhận ra rằng câu hỏi vẫn được đặt ra là phần đệm có tác dụng gì và lề có tác dụng gì, cũng như sự khác biệt giữa chúng là gì. Đó là lý do tại sao tôi quyết định nhắc nhở bạn về điều này. Vì vậy, mà không cần dùng đến cụm từ trừu tượng Hãy đặt vấn đề và xem một ví dụ trong đó mọi thứ sẽ trở nên rõ ràng.

Nhiệm vụ: trên trang Tôi cần một khối màu đỏ(200x200 pixel), trong đó rút lui khỏi các cạnh của trình duyệt trên cùng và bên trái lần lượt là 40 và 70 pixel, và văn bản bên trong được thụt vào bên trái và trên cùng bằng 40 pixel.

Giải pháp: nhìn vào hình ảnh và mã. Khối màu đỏ của chúng tôi không được vượt quá 200 x 200 pixel và phải được thụt vào từ các cạnh của trình duyệt (hoặc các khối nội dung khác). Trên thực tế, chúng tôi thực hiện những vết lõm này thông qua lề. Nếu chúng ta thực hiện đệm, thì vết lõm sẽ xảy ra bên trong khối màu đỏ của chúng ta và vết lõm sẽ thu được với nền của chính khối đó (nghĩa là màu đỏ).

.khối(
chiều rộng: 160px;
chiều cao: 160px;
màu nền: đỏ;
lề trên: 40px;
lề trái: 70px;
phần đệm trên cùng: 40px;
phần đệm bên trái: 40px;
}


văn bản, văn bản, rất nhiều văn bản, rất nhiều văn bản văn bản

Ngoài các thuộc tính được sử dụng (dòng 6-9), còn có thuộc tính lề-right, đệm-phải, lề dưới, đệm dưới cùng - chúng lần lượt dành cho phần đệm ở bên phải và dưới cùng. Giá trị cho tất cả các thuộc tính này có thể tính bằng pixel (px), phần trăm (%) hoặc đơn vị em.

Về cơ bản thì chỉ vậy thôi. Tuy nhiên, vẫn có một số tính năng khi làm việc với chúng.

Các tính năng của lề và phần đệm

Khi sử dụng phần đệm, kích thước của phần đệm phải được trừ khỏi chiều cao và chiều rộng của khối, nếu không kích thước của khối sẽ tăng theo kích thước của phần đệm.

Nếu một khối được gán giá trị lề trái và lề phải là auto, thì nếu khối có chiều rộng cố định (ví dụ: 400px) và không có thuộc tính CSS float thì khối này sẽ được căn chỉnh vào giữa của phần tử mà nó nằm trong đó. Trên thực tế, đối với bố cục phi cao su có căn giữa, phương pháp căn chỉnh này thường được sử dụng. Mặc dù thực tế là IE 5.5 trở về trước không hỗ trợ giá trị tự động, nhưng điều này vẫn không ngăn cản bạn sử dụng nó mọi lúc =).

Không nên sử dụng phần đệm và lề trong bảng vì hiệu ứng sẽ không thể đoán trước được trên các trình duyệt khác nhau.

Và điều cuối cùng tôi muốn nói. Đừng quên sử dụng cấu trúc ký hiệu tốc ký, chẳng hạn như lề: 10px 0 5px 20px;. Nếu mức thụt lề bằng 0, thì bạn có thể chỉ cần đặt số 0 mà không cần chỉ định các tham số. Rất dễ nhớ tham số nào liên quan đến ranh giới nào - đối với một khối, thụt lề theo chiều kim đồng hồ: số đầu tiên ở trên, số thứ hai ở bên phải, số thứ ba ở dưới cùng, số thứ tư ở trên bên trái.

Đó thực sự là tất cả những gì tôi muốn nói với bạn ngày hôm nay. Chúc mừng tất cả mọi người cuối tuần!

Chúng ta hãy xem sự khác biệt giữa lề và phần đệm. Để làm điều này, chúng ta hãy nhớ lại mô hình khối trong CSS.

MARGIN (Lề) là khoảng cách từ đường viền (khung) của khối, đến các phần tử gần nhất hoặc, nếu không có, đến các cạnh của tài liệu.

PADDING (Thụt lề) - giống như khoảng cách bên trong giữa đường viền (khung) và nội dung của khối.

Ví dụ: Hãy tạo ba kiểu cho ba đoạn văn khác nhau, với các giá trị lề và phần đệm khác nhau, rồi xem kết quả:

Những thứ kia. các giá trị được viết theo chiều kim đồng hồ: trên, phải, dưới, trái.

Trong trường hợp nào nên sử dụng thụt lề và trong trường hợp nào nên sử dụng lề?

Một vài điểm khác biệt chính:

Thụt lề (phần đệm) được đặt bên trong khối và lề (lề) được đặt bên ngoài chúng;

Nền khối và hình nền chỉ áp dụng cho phần đệm, không áp dụng cho lề. Lề luôn trong suốt, cho phép nền của phần tử gốc hiển thị xuyên suốt.

14. Chiều cao và chiều rộng của khối

Theo mặc định, chiều cao và chiều rộng của khối được xác định tự động, tức là. càng nhiều văn bản (hoặc nội dung khác) thì khối càng rộng và càng cao.

Tuy nhiên, bằng cách sử dụng công nghệ CSS, chúng ta có thể đặt chiều rộng và chiều cao của các khối mà chúng ta cần.

HEIGHT – thuộc tính đặt chiều cao của khối;

WIDTH – thuộc tính đặt chiều rộng của khối;

Thông thường, các phần tử DIV được sử dụng làm khối trong CSS. Tuy nhiên, thuộc tính chiều rộng và chiều cao cũng có thể được áp dụng cho các đoạn văn, danh sách, v.v.

Hãy tạo 4 lớp và gán từng lớp một vào cùng một hộp (trong trong trường hợp này DIV ) bằng văn bản.

Bây giờ chiều cao đã được cố định và chiều rộng được kéo dài để vừa với nội dung.

.box3 ( chiều rộng: 300px; chiều cao: 600px; đường viền: 1px màu đỏ đặc; nền: #FFE446; )

Ở đây cả chiều cao và chiều rộng đều cố định.

.box4 ( chiều rộng: 300px; chiều cao: 300px; đường viền: 1px màu đỏ đặc; nền: #FFE446; )

Và đây là ví dụ về hình thức của một hộp có chiều rộng và chiều cao cố định nếu nội dung không vừa. Văn bản chỉ đơn giản là vượt ra ngoài khối.

Ghi chú!

Do đó, bằng cách chỉ định chiều rộng của một khối, bạn đang chỉ định chiều rộng của phần khối dành riêng cho nội dung.

Lời tác giả: Khi mới bắt đầu học CSS, tôi cứ bối rối 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 về, sơ đồ dưới đây được hiển thị.

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ề. Phần đệ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ể gây ra những tác động không thể đoán trước đối với 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 theo chiều 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ị 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 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 điều cần nhớ Sử dụng đúng đơn vị đo lường

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ử. 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à trên cùng một 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 tử cha, lề của phần tử con sẽ “chảy” từ phần tử cha.

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ử cha cho phép bạn khắc phục vấn đề.

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 việc sử dụng lề và khoảng đệm có thể giải quyết được 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, phần đệm CSS sẽ giúp bạn.

Để 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.

19 câu trả lời

TL; DR: Theo mặc định, tôi sử dụng lề ở mọi nơi ngoại trừ khi tôi có đường viền hoặc nền và tôi muốn tăng khoảng trống bên trong lề hiển thị đó.

Đối với tôi nhất một sự khác biệt lớn giữa phần đệm và lề là lề dọc được tự động nén, còn phần đệm thì không.

Hãy xem xét hai phần tử, phần tử này nằm trên phần tử kia, mỗi phần tử có thụt lề 1em. Phần thụt lề này được coi là một phần của phần tử và luôn được giữ nguyên.

Vì vậy, bạn sẽ nhận được nội dung của phần tử đầu tiên, tiếp theo là phần đệm của phần tử đầu tiên, sau đó là phần đệm của phần tử thứ hai và sau đó là nội dung của phần tử thứ hai.

Vì vậy nội dung của 2 phần tử này cuối cùng sẽ là 2em by 2 phần tử.

Bây giờ thay thế phần đệm này bằng lề 1em. Lề được coi là nằm ngoài ranh giới của phần tử và lề của các phần tử liền kề sẽ chồng lên nhau.

Vì vậy, trong ví dụ này, bạn sẽ nhận được nội dung của phần tử đầu tiên, tiếp theo là 1em của hộp tổ hợp và sau đó là nội dung của phần tử thứ hai. Như vậy, nội dung của hai phần tử này cách nhau 1 1em.

Điều này có thể rất hữu ích khi bạn biết bạn muốn phân biệt khoảng cách 1em giữa các phần tử, bất kể phần tử đó nằm cạnh phần tử nào.

Hai điểm khác biệt lớn khác là phần đệm được bao gồm trong vùng nhấp chuột và màu nền/hình ảnh, nhưng không có trong hộp.

Điều tốt nhất tôi từng thấy giải thích nó bằng các ví dụ, sơ đồ và thậm chí "tự mình thử" là thế này.

Biểu đồ dưới đây cung cấp tức thời đại diện trực quan về sự khác biệt.

Một điều cần lưu ý là các trình duyệt tuân thủ tiêu chuẩn (ngoại lệ của IE) chỉ hiển thị một phần nội dung ở một chiều rộng nhất định, vì vậy hãy theo dõi điều này trong tính toán bố cục của bạn. Cũng lưu ý rằng hỗ trợ Bootstrap 3 hiển thị trong khung cửa sổ.

LÃI VÀ ĐỆM:

Lề được sử dụng trong một phần tử để tạo khoảng cách giữa phần tử đó với các phần tử khác trên trang. Khi đệm được sử dụng để tạo khoảng cách giữa nội dung và đường viền của một phần tử.

Lề không phải là một phần của phần tử, trong đó phần đệm là một phần của phần tử.

Có nhiều lời giải thích kỹ thuật hơn cho câu hỏi của bạn, nhưng nếu bạn đang tìm cách suy nghĩ về lề và phần đệm sẽ giúp bạn chọn thời điểm và cách sử dụng chúng, thì điều này có thể hữu ích.

So sánh các thành phần của khối với những bức tranh treo trên tường:

• Cửa sổ trình duyệt giống như một bức tường.
• nội dung tương tự như nhiếp ảnh.
• lề giống như khoảng cách giữa các hình ảnh được đóng khung.
• sự bổ sung giống như phủ một lớp phủ xung quanh bức ảnh.
• Đường viền tương tự như đường viền khung.

Khi quyết định về lề và khoảng đệm, nguyên tắc chung là sử dụng lề khi bạn định vị một phần tử trong mối liên hệ với những thứ khác trên tường và khoảng đệm. > khi bạn thiết lập vẻ bề ngoài bản thân phần tử đó. Lề sẽ không thay đổi kích thước của phần tử, nhưng phần đệm thường sẽ làm cho phần tử lớn hơn 1.

1 Mô hình cửa sổ mặc định này có thể được thay đổi bằng thuộc tính kích thước hộp.

Về phần lề, bạn không phải lo lắng về độ rộng của phần tử.

Cũng giống như khi bạn cho một thứ gì đó (padding: 10px;), bạn cần giảm chiều rộng của phần tử xuống 20px để giữ "vừa vặn" và không làm hỏng các phần tử khác xung quanh nó.

Vì vậy, tôi thường bắt đầu bằng cách sử dụng phần đệm để "đóng gói" mọi thứ và sau đó sử dụng lề để thực hiện các điều chỉnh nhỏ.

Một điều khác cần lưu ý là phần đệm tương thích hơn trong các trình duyệt khác nhau và IE không xử lý tốt tỷ lệ lợi nhuận âm.

Dưới đây là một số HTML minh họa mức độ đệm và lề ảnh hưởng đến tỷ lệ nhấp và lấp đầy nền. Đối tượng nhận được các nhấp chuột vào phần đệm của nó, nhưng nhấp chuột vào vùng lề của đối tượng để đi đến đối tượng cha của nó.

$(".outer").click(function(e) ( console.log("outer"); e.stopPropagation(); )); $(".inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .outer ( đệm: 10px; nền: đỏ; ) .inner ( lề: 10px; đệm: 10px; nền: xanh; viền: trắng liền 1px; )

Lề xóa vùng xung quanh phần tử (bên ngoài đường viền), nhưng phần đệm sẽ xóa vùng xung quanh nội dung (bên trong đường viền) của phần tử.

điều này có nghĩa là phần tử của bạn không biết về giới hạn bên ngoài của nó, vì vậy nếu bạn đang thiết kế các điều khiển web động, tôi khuyên bạn nên sử dụng khoảng đệm và lề nếu có thể.

Xin lưu ý rằng đôi khi bạn cần sử dụng ký quỹ.

Trong CSS, có hai cách để tạo khoảng trống xung quanh các phần tử của bạn: lề và phần đệm. Trong hầu hết các trường hợp sử dụng, chúng giống hệt nhau về mặt chức năng, nhưng trên thực tế, chúng hoạt động hơi khác nhau. Có những khác biệt quan trọng giữa lề và phần đệm mà bạn nên cân nhắc khi chọn những gì sẽ sử dụng để di chuyển các thành phần xung quanh trang. Tuy nhiên, trong trường hợp bất kỳ lề hoặc phần đệm nào cũng có thể được sử dụng cho cùng một tác dụng, nhiều quyết định tùy thuộc vào sở thích cá nhân.

Khi nào nên sử dụng các trường

Bạn muốn khoảng cách của mình xuất hiện bên ngoài ô đã tạo tài sản biên giới. Lề nằm bên ngoài đường viền, vì vậy bạn sử dụng chúng nếu bạn muốn đường viền của mình ở một nơi. Điều này có thể hữu ích nếu bạn có ví dụ: bảng điều khiển bên có đường viền mà bạn muốn di chuyển ra khỏi khu vực nội dung chính.

Bạn không muốn màu nền hoặc hình ảnh xâm chiếm không gian cá nhân của mình. Màu nền và hình ảnh dừng ở đường viền, vì vậy nếu bạn muốn giữ hình nền của mình nằm ngoài không gian bạn đang tạo, thì lề là thuộc tính bạn muốn.

Bạn muốn đặt lại khoảng trống ở đầu và cuối phần tử của mình. Lề trên và lề dưới hoạt động khác với lề bên; nếu hai lề được đặt chồng lên nhau, chúng sẽ thu gọn về cùng kích thước với lề bên. bộ lớn lĩnh vực. Ví dụ: nếu tôi đặt một đoạn văn có lề trên 20px và lề dưới 15px, tôi sẽ chỉ có 20px khoảng cách giữa các đoạn văn (hai lề nằm chồng lên nhau và phần thắng lớn nhất).

Khi nào nên sử dụng miếng đệm

Bạn muốn tất cả không gian bạn tạo ra nằm trong ranh giới của bạn. Phần đệm nằm bên trong đường viền của bạn, vì vậy, nó rất hữu ích trong việc đẩy đường viền ra khỏi nội dung bên trong phần tử của bạn.

Bạn muốn màu nền/hình ảnh của mình tiếp tục tồn tại trong không gian bạn tạo. Nền của bạn sẽ tiếp tục phía sau phần bổ sung của bạn, vì vậy chỉ sử dụng nó nếu bạn muốn giao diện của nền.

Bạn muốn phần trên và phần dưới của mình hoạt động cứng nhắc hơn. Ví dụ: nếu bạn đặt các đoạn văn trong tài liệu của mình có phần đệm trên cùng là 20px và phần đệm dưới cùng là 15px thì bất cứ khi nào bạn có hai đoạn văn trên mỗi dòng, chúng thực sự có tổng cộng 35 pixel không gian giữa chúng.

Sự khác biệt giữa trường mở rộng và giải thích

Việc sử dụng phần đệm trên không gian nội dung trong một phần tử là không thực tế; bạn nên sử dụng lề trên phần tử con. Các trình duyệt cũ như trình duyệt web IE, hiểu sai mô hình cửa sổ ngoại trừ khi sử dụng lề, hoạt động tốt trong Internet Explorer 4.

Có hai trường hợp ngoại lệ đối với phần đệm:

Nó áp dụng cho phần tử nội tuyến, không thể chứa các phần tử con như phần tử đầu vào.

Bạn bù đắp rất nhiều lỗi khác nhau trình duyệt mà người bán *khụ* Mozilla *khụ* từ chối sửa và để chắc chắn rằng (trong phạm vi bạn thường xuyên trao đổi với các biên tập viên W3C và WHATWG) bạn nên có giải pháp làm việc và quyết định này sẽ không ảnh hưởng đến kiểu dáng của bất kỳ thứ gì ngoài lỗi mà bạn đang bồi thường.

Khi bạn có phần tử có chiều rộng 100% với phần đệm: 50px; , bạn sẽ nhận được chiều rộng: calc(100% + 100px); . Vì lề không được thêm vào width nên sẽ không gây ra sự cố bố cục không mong muốn nếu bạn sử dụng lề trên các phần tử con thay vì đệm trực tiếp trên phần tử đó.

Vì vậy, trừ khi bạn thực hiện một trong hai điều này, đừng thêm phần đệm vào phần tử mà hãy sử dụng phần tử con/con trên đó để đảm bảo hành vi mong đợi trong tất cả các trình duyệt.

Trước tiên hãy xem sự khác biệt là gì và mỗi trách nhiệm là gì:

1) Ký quỹ

Thuộc tính lề CSS được sử dụng để tạo khoảng trống xung quanh các phần tử.
Thuộc tính lề đặt kích thước của khoảng trắng bên ngoài lề đường viền. Với CSS, bạn có toàn quyền kiểm soát các trường.
Có các Thuộc tính CSS để đặt lề cho mỗi cạnh của phần tử (trên, phải, dưới và trái).

2) Miếng đệm

Thuộc tính phần sụn CSS được sử dụng để tạo không gian xung quanh nội dung.
Phần đệm xóa vùng xung quanh nội dung (bên trong đường viền) của phần tử.
Với CSS bạn có toàn quyền kiểm soát qua việc bổ sung. Có các thuộc tính CSS để đặt phần đệm cho mỗi cạnh của phần tử (trên, phải, dưới và trái).

Hiểu một cách đơn giản, Margin là khoảng trống xung quanh các phần tử, còn Padding là khoảng trống xung quanh nội dung là một phần của phần tử.



Hình ảnh này từ các nhà lập trình cho thấy cách các đường viền và ranh giới có thể truy cập được cũng như cách các đường viền và hộp nội dung khiến chúng trở nên khác biệt.

Ở chương trước chúng tôi đã đề cập đến điều đó Thuộc tính CSS, như lề (trường) và phần đệm (thụt lề). Bây giờ chúng ta sẽ xem xét chúng chi tiết hơn và xem xét chúng khác nhau như thế nào và chúng có những tính năng gì.

Bạn có thể tạo khoảng trắng giữa các phần tử theo cách này hoặc cách khác, nhưng nếu phần đệm là khoảng cách từ nội dung đến cạnh của khối, thì lề là khoảng cách từ khối này đến khối khác, khoảng cách giữa các khối. Ảnh chụp màn hình hiển thị một ví dụ rõ ràng:

Phần đệm tách nội dung khỏi đường viền khối và lề tạo khoảng cách giữa các khối

Như bạn có thể thấy, các trường và Phần đệm CSS khác nhau, mặc dù đôi khi không nhìn vào mã thì không thể xác định thuộc tính nào được sử dụng để đặt khoảng cách. Điều này xảy ra khi khung hoặc nền của khối nội dung bị thiếu.

Các thuộc tính sau tồn tại để đặt lề hoặc phần đệm trong CSS ở mỗi bên của một phần tử:


Phần đệm:

• phần đệm trên cùng: nghĩa;
• đệm-phải: nghĩa;
• phần đệm dưới cùng: nghĩa;
• đệm-trái: nghĩa;

Lĩnh vực:

• lề trên: nghĩa;
• lề phải: nghĩa;
• lề dưới: nghĩa;
• lề trái: nghĩa;

Các giá trị có thể được chỉ định trong bất kỳ Đơn vị CSS– px, em, %, v.v. Ví dụ: lề-top: 15px .

Ngoài ra còn có rất điều tiện lợi như cách viết tắt của CSS lề và phần đệm. Nếu bạn cần đặt lề hoặc khoảng đệm trên cả bốn cạnh của một phần tử, bạn không cần phải viết thuộc tính cho từng cạnh riêng lẻ. Mọi thứ được thực hiện đơn giản hơn: đối với lề và phần đệm, bạn có thể chỉ định 1, 2, 3 hoặc 4 giá trị cùng một lúc. Số lượng giá trị xác định cách phân phối cài đặt:

• 4 giá trị: phần đệm được đặt cho tất cả các cạnh của phần tử theo trình tự sau: trên, phải, dưới, trái: phần đệm: 2px 4px 5px 10px;
• 3 giá trị: phần đệm được đặt đầu tiên cho mặt trên, sau đó đồng thời cho bên trái và bên phải, sau đó cho phần dưới cùng: phần đệm: 3px 6px 9px;
• 2 giá trị: phần đệm được đặt đồng thời đầu tiên từ cạnh trên và dưới, sau đó đồng thời cho bên trái và bên phải: phần đệm: 6px 12px;
• 1 giá trị: phần đệm bằng nhau được đặt cho tất cả các cạnh của phần tử: phần đệm: 3px;

Các quy tắc tương tự áp dụng cho thuộc tính lề CSS. Xin lưu ý rằng bạn cũng có thể sử dụng các giá trị âm cho lề (ví dụ: -3px), điều này đôi khi có thể khá hữu ích.

Thu gọn lề

Hãy tưởng tượng tình huống: hai phần tử khốiđược đặt chồng lên nhau và được cấp các trường lề. Khối trên cùng được đặt thành lề: 60px và khối dưới cùng được đặt thành lề: 30px. Sẽ rất hợp lý khi giả định rằng hai trường viền của hai phần tử sẽ chỉ chạm vào nhau và kết quả là khoảng cách giữa các khối sẽ bằng 90 pixel.

Tuy nhiên, mọi thứ lại khác. Trên thực tế, trong tình huống như vậy, một hiệu ứng xảy ra được gọi là sụp đổ, khi kích thước lớn nhất được chọn từ hai trường phần tử liền kề. Trong ví dụ của chúng tôi, khoảng cách cuối cùng giữa các phần tử sẽ là 60 pixel.


Khoảng cách giữa các khối bằng giá trị lớn hơn

Thu gọn lề chỉ có tác dụng đối với lề trên và lề dưới của phần tử và không áp dụng cho lề bên phải và bên trái. Giá trị khoảng cách cuối cùng được tính bằng Những tình huống khác nhau khác nhau:

• Khi cả hai giá trị lề đều dương thì kích thước lề thu được sẽ bằng giá trị lớn hơn.
• Nếu một trong các giá trị âm, thì để tính kích thước của trường, bạn cần lấy tổng của các giá trị. Ví dụ: với giá trị 20px và -18px thì kích thước trường sẽ bằng:
  20 + (-18) = 20 – 18 = 2 pixel.
• Nếu cả hai giá trị đều âm, mô đun của các số này sẽ được so sánh và số có mô đun lớn hơn (do đó số nhỏ hơn trong hai số) sẽ được chọn. số âm). Ví dụ: bạn cần so sánh giá trị của trường -6px và -8px. Mô đun của các số được so sánh lần lượt là 6 và 8. Tiếp theo đó là 6 -8. Kích thước trường kết quả là -8 pixel.
• Trong trường hợp các giá trị được chỉ định trong đơn vị khác nhau CSS, chúng được giảm xuống còn một, sau đó chúng được so sánh và giá trị lớn hơn được chọn.
• kích thước lề cho phần tử con nó thậm chí còn được định nghĩa thú vị hơn: nếu phần tử con có trường lề lớn hơn phần tử cha, thì nó sẽ được ưu tiên. Trong trường hợp này, kích thước của lề trên và dưới của phần tử cha sẽ giống với kích thước được chỉ định cho phần tử con. Trong trường hợp này, sẽ không có khoảng cách giữa cha mẹ và con cái.