Sự khác biệt giữa lề và phần đệm. Thuộc tính PADDING và MARGIN và cách sử dụng

Ở 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 Làm sao 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.

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 các phần tử con được xác định theo một cách thậm chí còn thú vị hơn: nếu phần tử con có lề lớn hơn phần tử gốc 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.

Hãy xem những gì biên độ chênh lệch từ phần đệm. Để làm điều này, chúng ta hãy nhớ lại mô hình khối trong CSS.

LỀ -đây 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.

ĐỆM - 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.

CHIỀU CAO– thuộc tính đặt chiều cao của khối;

CHIỀU RỘNG– một thuộc tính thiết lập chiều rộng của khối;

Thông thường, phần tử được sử dụng làm khối trong CSS DIV. 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) với 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.

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

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.

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à, điều gì làm phần đệm, Vậy thì sao lề, và 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 đỏ).

Ngoài các thuộc tính được sử dụng (dòng 6-9), còn có các thuộc tính lề phải, đệm phải, lề dưới, đệm dưới cùng - chúng tương ứng để thụt lề ở 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ề nguyên tắc 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!

Từ tác giả: Khi tôi 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ề. tài sản ký quỹ 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; )

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 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 đối 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, 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.

Xin chào các độc giả thân mến của trang blog. Hôm nay tôi muốn tiếp tục chủ đề nghiên cứu và xem xét các quy tắc kiểu dáng cho phép bạn đặt thụt lề và đường viền cho phần tử HTML: đường viền, lề và phần đệm.

Trước đó chúng tôi đã học được khá nhiều tính chất đơn giản thao tác phông chữ(), văn bản() và xem mô hình

Có, chúng tôi cũng đã cố gắng xem xét chi tiết các nguyên tắc sử dụng (mở rộng qua một số bài viết). Bây giờ là lúc chuyển sang các quy tắc tạo cơ sở cho việc xây dựng tài liệu (trang web) và chúng ta sẽ bắt đầu với mô hình khối (mối quan hệ của các phần tử Html).

TRONG phác thảo chung Tôi đã viết về những cái hiện đại, nhưng hôm nay chúng ta sẽ đi vào chi tiết cụ thể. Nếu bạn muốn xem qua ấn phẩm trước đây về chủ đề này, thì bạn được chào đón.

Mô hình hộp trong CSS - phần đệm, lề và đường viền

Thứ ba, tiền lãi có thể được sử dụng. Chúng được tính từ đâu? Hoá ra là thế từ chiều rộng container(nghĩa là từ vùng nội dung của phần tử cha). Hơn nữa, điều này không chỉ áp dụng cho lề phải và trái, điều này hợp lý mà còn áp dụng cho lề trên và dưới, tỷ lệ phần trăm sẽ được tính chính xác từ chiều rộng (chứ không phải chiều cao) của vùng chứa.

Cần lưu ý, khi nói về việc thiết lập các giá trị thứ nguyên, Margin cũng có thể tiêu cực. Những thứ kia. khi chỉ định giá trị dương cho lề ngoài, chúng tôi di chuyển phần tử liền kề đến khoảng cách đã chỉ định và nếu chúng tôi chỉ định giá trị âm, khối lân cận sẽ chỉ chồng lên khối mà chúng tôi đặt thụt lề âm này. Và điều này được sử dụng rất thường xuyên trong CSS.

Chà, không cần phải nói rằng có một quy tắc Ký quỹ CSS được tạo sẵn, trong nhiều trường hợp cho phép bạn giảm kích thước của mã được sử dụng để đặt kích thước bắt buộc lề. Thứ tự các giá trị trong đó được quy định chặt chẽ (chúng được viết thông qua ký tự không gian) và phải phù hợp với ví dụ:

Những thứ kia. việc liệt kê bắt đầu từ đầu và tiếp tục theo chiều kim đồng hồ cho đến khi hoàn thành vòng tròn với vết lõm bên phải (phải). Nó có thể trông giống như thế này:

Lề:20px 10px 40px 30px;

Và điều này có nghĩa là trình duyệt phía trên khối của chúng ta phải thụt lề 20 pixel, ở bên phải - 10, bên dưới - 40 và ở bên trái - 30. Tức là. mục này sẽ tương đương với:

Việc giảm code CSS có thể nhìn thấy bằng mắt thường. Nhưng đây không phải là giới hạn. Việc sử dụng không chỉ bốn mà còn ba, hai và thậm chí chỉ một giá trị trong quy tắc đúc sẵn là hoàn toàn có thể chấp nhận được. Điều này sẽ tiếp tục giúp giảm kích thước mã. Tuy nhiên, chỉ có thể giảm số lượng giá trị trong một số trường hợp nhất định:

1. Nếu lề bên trái và bên phải giống nhau, ví dụ như sau: lề:20px 30px 40px 30px;

   Cái cuối cùng có thể được bỏ qua:

   Lề:20px 30px 40px;

   Hai mục quy tắc prefab này thực hiện điều tương tự. Do đó, nếu bạn thấy một mục có ba giá trị trong Margin, thì giá trị của giá trị thứ tư (ở bên phải) có thể được nhìn thấy trong giá trị thứ hai (ở bên trái).

   Nếu các khoảng thụt lề trên và dưới bằng nhau thì thủ thuật như vậy sẽ không còn tác dụng nữa, vì về mặt logic, có thể giảm cấu trúc mục nhập của một quy tắc đúc sẵn, chỉ cắt bỏ các giá trị trùng lặp từ cuối của nó(và giá trị của thụt lề dưới cùng sẽ là giá trị thứ hai từ cuối cùng).

2. Nếu, ngoài sự bằng nhau của các lề ngoài ở bên trái và bên phải, còn có sự bằng nhau về các giá trị của chúng ở trên và dưới: lề:20px 30px 20px 30px;

   hoặc, điều gì giống nhau (do điểm 1):

   Lề:20px 30px 20px;

   Sau đó, một quy tắc đúc sẵn như vậy có thể được viết chỉ với hai giá trị, loại bỏ giá trị cuối cùng trùng với giá trị đầu tiên:

   Lề:20px 30px; Trong trường hợp này, giá trị đầu tiên mô tả lề ngoài theo chiều dọc và giá trị thứ hai - theo chiều ngang.

3. Và cuối cùng, nếu tất cả các giá trị trong quy tắc prefab đều giống nhau: lề:20px 20px 20px 20px;

   hoặc, tương tự (do điểm 2):

   Lề:20px 20px;

   Nó sẽ có thể sử dụng loại bản ghi viết tắt tối đa(loại bỏ giá trị cuối cùng trùng với điều đầu tiên):

   Lề:20px; Điều này có nghĩa là cùng một lề ở tất cả các phía của phần tử Html của chúng ta.

Nói về lợi nhuận bên ngoài, điều đáng nói là một sơ đồ như "Thu gọn lề" hay nói cách khác là “sự sụp đổ của lề”. Tóm lại, bản chất của hiện tượng này như sau.

Nếu chúng ta có hai khối nằm bên dưới nhau (việc thu gọn lề chỉ có thể xảy ra theo chiều dọc) và lề ngoài đối diện được đặt cho cả hai khối (ví dụ: phần dưới cùng cho phần tử trên cùng và lề trên cho phần dưới cùng), thì Giá trị cao hơn Margin sẽ hấp thụ ít hơn.

Ví dụ: nếu khối trên cùng được đặt thành:

Lề:20px 20px 200px 20px;

Và đối với phần dưới cùng:

Lề:100px 20px 20px 20px;

Khi đó, lề dưới của khối trên (200px) sẽ hấp thụ lề trên của khối dưới (100px và ngay cả khi nó bằng 199px, sẽ không có gì thay đổi) và lề ngoài thu được giữa hai khối này sẽ vẫn bằng 200px. Những thứ kia. chỉ cái lớn hơn mới được tính đến Ký quỹ modulo và nó không cộng theo bất kỳ cách nào với giá trị bộ đếm của phần tử liền kề theo chiều dọc.

Đây là một tính năng bắt chỉ hoạt động theo chiều dọc và chiều ngang, các kích thước Ký quỹ đối lập sẽ chỉ được thêm vào nhau. Nhưng điều này chỉ áp dụng cho các lề có cùng dấu, còn nếu chúng có dấu khác nhau, thì số của chúng sẽ cộng lại và các khối sẽ được phân tách với nhau bằng giá trị kết quả.

Ví dụ: trong trường hợp này:

Lề trên:20px 20px -20px 20px; Lề dưới:10px 20px 20px 20px;

Lề kết quả giữa các khối sẽ là -10px, tức là phần dưới cùng sẽ chồng lên phần tử Html trên cùng 10px.

Một tính năng khác của việc sử dụng quy tắc Margin trong CSS là giá trị được chỉ định theo chiều dọc cho phần tử nội tuyến làm ngơ. Bằng cách hỏi:

Lề:20px;

Ví dụ: đối với , là phần tử nội tuyến, chúng ta thực sự sẽ chỉ thấy phần đệm ngang và sẽ không có thay đổi nào xảy ra theo chiều dọc.

Nhìn về phía trước một chút, tôi sẽ nói rằng Phần đệm theo chiều dọc cho thẻ dòng sẽ hoạt động, nhưng phần đệm bên trong tăng lên sẽ không ảnh hưởng đến nó theo bất kỳ cách nào tình hình chung so với các phần tử lân cận khác.

Trong trường hợp thẻ khối (tiêu đề, đoạn văn), việc tăng Khoảng đệm dọc sẽ di chuyển phần tử này so với các khối liền kề khác.

Chà, khung (Border), hay đúng hơn là chiều rộng của nó, cũng sẽ không thể di chuyển các khối liền kề khác theo chiều dọc ra khỏi thẻ dòng. Đối với các phần tử nội tuyến, chỉ có thể di chuyển theo một hướng - theo chiều ngang và thế là xong.

Phần đệm và đường viền - phần đệm và khung bên trong

Bây giờ chúng ta hãy chuyển sang cài đặt phần đệm bằng quy tắc Khoảng đệm và xem chính xác những giá trị nào nó có thể nhận:

Như bạn có thể thấy, không có đề cập đến Auto ở đây và quy tắc CSS này không cho phép sử dụng các giá trị âm (chúng chỉ có thể là dương - từ 0 trở lên). Những thứ kia. Không có cách nào để đẩy nội dung ra ngoài khung bằng Padding. Điều tối đa có thể làm là đưa nội dung thật gần khung hình.

Tỷ lệ phần trăm trong đó được tính theo cách tương tự như trong Margin - liên quan đến chiều rộng của vùng chứa (vùng nội dung của phần tử cha) mà phần tử của chúng ta được bao quanh. Quy tắc đệm tổng hợp trong Cssđược hình thành và tuân theo các quy luật tương tự như đã thảo luận ở trên:

Phần đệm:20px 10px 40px 30px;

Trong quy tắc này, bắt đầu từ trên xuống, chúng tôi mô tả cả bốn phía. Nếu bạn cần giảm thứ gì đó trong đó (xuống ba, hai hoặc thậm chí một giá trị), thì bạn sẽ cần sử dụng các nguyên tắc rút gọn được mô tả ở trên cho các thụt lề bên ngoài, điều này sẽ mang lại thành công tương tự cho các thụt lề bên trong.

Và điều cuối cùng hôm nay tôi muốn xem xét là framework được thiết lập bằng cách sử dụng Ranh giới. Họ có ba loại tham số:

1. Độ rộng đường viền - đặt độ dày của đường viền
2. Màu viền - đặt màu của nó
3. Kiểu đường viền - loại khung hoặc loại đường mà nó sẽ được vẽ

Cả ba quy tắc CSS này đều có một bộ giá trị hợp lệ:

Độ rộng đường cho khung ( Chiều rộng biên giới) có thể được chỉ định bằng cách sử dụng các số trong Em, Ex hoặc Px hoặc bằng chữ:

1. Đường mỏng - mỏng;
2. Trung bình - trung bình ( giá trị đã chođược sử dụng theo mặc định);
3. Dày - dày.

Là một giá trị cho màu khung ( Màu viền), bạn có thể sử dụng các phương thức được chấp nhận để chỉ định chúng ( mã thập lục phân, từ, v.v.):

Màu viền: đỏ;

Theo mặc định, nếu màu đường viền không được chỉ định rõ ràng thì màu được sử dụng cho phông chữ bên trong phần tử sẽ được sử dụng.
CSS Thuộc tính kiểu viền cho phép bạn chỉ định loại khung trong từ:

1. Không có - không có khung (mặc định)
2. Chấm - đường được vẽ bằng dấu chấm
3. Đường đứt nét - đường chấm
4. Đường nét liền - nét liền
5. Đường đôi - đường đôi
6. Groove - khung chán nản
7. Sườn núi nhô ra
8. Bắt đầu và bắt đầu - trò chơi bóng tối

Đương nhiên, vì bất kỳ khối nào cũng có bốn cạnh nên nó có thể được sử dụng làm quy tắc chung, và riêng biệt cho mỗi bên:

Điều tương tự sẽ áp dụng cho quy tắc biên giới đúc sẵn— nó có thể được chỉ định đồng thời cho cả hai bên (Đường viền) và cho từng bên riêng biệt (Đường viền trên, bên trái, dưới cùng và bên phải). Thứ tự của các giá trị không quan trọng:

Đường viền:1px màu đỏ đậm;

Nếu bạn bỏ lỡ điều gì đó, giá trị mặc định sẽ được sử dụng thay thế.

Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog

Bạn có thể xem thêm video bằng cách vào

Bạn có thể quan tâm

Chiều cao, chiều rộng và tràn - Quy tắc CSSđể mô tả một khu vực nội dung trong bố cục khối
Vị trí (tuyệt đối, tương đối và cố định) - phương pháp định vị html các phần tử trong CSS (quy tắc trái, phải, trên và dưới) Thiết kế khác nhau cho nội bộ và liện kết ngoại thông qua CSS
Nổi và xóa trong CSS - công cụ bố cục khối
Hiển thị (chặn, không có, nội tuyến) trong CSS - đặt loại hiển thị HTML các thành phần trên một trang web