Đệm là gì? Chúng ta hãy nhớ mãi: sự khác biệt giữa lề và phần đệm là gì. Phần đệm và đường viền - phần đệm và khung bên trong

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:

Việc thụt lề đượ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 (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á.

Lề được đặt thành 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.

... ...

Không tốn kém phần tử con, và gây thiệt hại cho những cái lân cận, một vết lõm được tạo ra.

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ị).

.block__item > .block ( lề-phải: 10px; ) .block.block__item ( lề-phải: 10px; ) .block-wrap > .block ( lề-phải: 10px; ) Đối với phần tử cuối cùng của nhóm, 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ử 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

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 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 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 ô đã 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ó 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 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 mà 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 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 qua việc bổ sung. 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.

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ì. Việc xử lý đúng lề và phần đệm đóng một vai trò rất quan trọng trong vấn đề này.

Việc thụt lề đượ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).

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.

Lý do đơn giản nhất khiến bạn nên tuân thủ nguyên tắc này là để giúp bạn dễ dàng tìm thấy vết lõm 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.

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ị).

Hãy lấy một ví dụ khác:

... 10.10.10 ... ...

Thường xuyên hơn các lớp giả khác, bạn nên sử dụng:last-child.

Tất nhiên, có những trường hợp đặc biệt, những nhiệm vụ không tầm thường 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ể.

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ề cho mục đích định dạng và khi nào phần đệm, và nó có tạo nên 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:

giữa các thẻ (màu xanh);
giữa các thẻ và hộp đựng chúng (màu xanh lá cây);

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

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.

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 cái này không, tên này cũng chứa một quy tắc với tài sản ký quỹ lớp .card là gì? Không, có một giải pháp tốt hơn.

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.

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.

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.

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.

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.