Xử lý phần đệm trong chế độ xem của bạn. Thuộc tính PADDING và MARGIN và cách sử dụng
18/10/2017 lúc 03:36 chiều Tổ chức thụt lề trong bố cục (lề/phần đệm)- CSS
- HTML
- 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:
Đ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 (với một số 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 nhà không tự đẩy.
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á.
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 chính xác.
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 nhằm 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ề 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ó vết 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ị).
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ử ul và img liền kề. 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:
...
10.10.10
...
...
Chúng ta quan tâm đến lề giữa các tin tức được set.blog-preview__item (margin-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 theo 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 nhiệm vụ không tầm thường và các sắc thái không thể tuân thủ các nguyên tắc này, nhưng mặt khác, đáng để 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ể.
P.S. Tôi khuyên bạn nên đọc ấn phẩm
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à liệu 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 trong ví dụ này Có 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ư vậy bằng cách sử dụng các trường và phần đệm, nhưng tôi muốn giới thiệu cho bạn một trong số chúng, minh họa 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à thẻ. Làm sao để? Có đáng để tạo một tên lớp bổ sung .add-card cho lớp 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à thế nào? 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 thể hiện 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.
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, sử dụng đơn vị khác nhau các phép đo khi tạo các trang web thích ứ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ốiCá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; )
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 đệmBạ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ề 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 điều cần nhớ Sử dụng đúng đơn vị đo lườngKhi 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 nhauCá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 mình.
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 thành phần có thể thu gọn lại thành một. Hiện tượng này được gọi là sự 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 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ử gốc có thể khắc phục sự cố.
Trong trường hợp biên độ âm, giá trị cuối cùng của biên độ thu gọn bằng tổng của biên độ dương với giá trị ký quỹ â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 ảnhThô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ậnNế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. Trong phần trước, tôi đã chỉ ra hai cách thú vị để sử 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ềnThứ ba, tiền lãi có thể được sử dụng. Chúng được tính từ đâu? Hóa ra chiều rộng của vùng chứa (nghĩa là vùng nội dung 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, Ký quỹ đó cũng có thể âm. 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 yêu cầu 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ừ trên cùng và tiếp tục theo chiều kim đồng hồ cho đến khi vòng tròn kết thúc với vết lõm bên 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:
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 mức thụt lề bên trên và bên dưới bằng nhau thì thủ thuật như vậy sẽ không còn hiệu quả nữa vì về mặt logic, có thể giảm cấu trúc của bản ghi quy tắc đúc sẵn chỉ bằng cách cắt bỏ các giá trị trùng lặp khỏi phần cuối của nó (và giá trị của phần dưới thụt lề sẽ là áp chót).
hoặc, tương tự (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.
hoặc, tương tự (do điểm 2):
Lề:20px 20px;
Khi đó sẽ có thể sử dụng loại bản ghi viết tắt nhất (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ề tỷ suất lợi nhuận bên ngoài, điều đáng nói đến là một sơ đồ như “Thu gọn ký quỹ” hay nói cách khác là “thu hẹp tỷ suất lợi nhuận”. 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ề đố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 vẫn sẽ bằng 200px. Những thứ kia. Chỉ Biên độ modulo lớn hơn mới được tính đến 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 Ký quỹ trong CSS là giá trị dọc được chỉ định 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 trongBâ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ử gốc) mà phần tử của chúng ta được bao quanh. Quy tắc Padding trong Css được hình thành và tuân theo các 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à khuôn khổ được thiết lập với sử dụng Đường viền. Chúng có ba loại tham số:
Cả ba quy tắc CSS này đều có một bộ giá trị hợp lệ:
Độ rộng đường cho khung (Border-width) 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ữ:
Là giá trị cho màu đường viền ( Border-color ), 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ừ:
Đươ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ự cũng sẽ áp dụng cho quy tắc Đường viền kết hợp - nó có thể được viết đồ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
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 đầu dòng 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 hai 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 có 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 trên các trình duyệt và IE không xử lý tốt 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 d 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 hộp được tạo bởi thuộc tính border. 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, chẳng hạn như nếu bạn có một thanh 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ó trong 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 một phần tử nội tuyến không thể chứa phần tử con, chẳng hạn 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à nhà cung cấp *khụ* Mozilla *khụ* từ chối sửa và hãy yên tâm (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) rằng bạn nên có một giải pháp hoạt động và giải pháp đó sẽ không ảnh hưởng đến kiểu dáng của bất kỳ thứ gì hoặc thứ khác hơn lỗi mà bạn đang đền bù.
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 trường đặt kích thước của khoảng trắng bên ngoài trườ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 nội dung của mình. 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.
