Khi nào nên sử dụng lề và phần đệm trong CSS Thuộc tính PADDING và MARGIN và cách sử dụng

Hướng dẫn này sẽ giúp bạn hiểu rõ hơn về các thuộc tính CSS như đường viền, phần đệm và lề. Các thuộc tính này giúp ích rất nhiều cho nhà phát triển khi định vị các thành phần trên trang theo bố cục.

Hãy tạo một div và đặt cho nó các thuộc tính lề, phần đệm và đường viền.

Thuộc tính đệm

Thuộc tính CSS đệm chỉ định khoảng cách giữa đường viền của một phần tử và nội dung của nó. Bạn có thể định nghĩa nó như thế này:

phần đệm trên cùng: 10px;
phần đệm bên phải: 10px;
phần đệm dưới cùng: 10px;
phần đệm bên trái: 10px;

Mục này có thể được rút ngắn:

phần đệm:25px 50px 75px 100px;
- 25px hàng đầu
- đúng 50px
- 75px dưới cùng
- trái 100px
phần đệm:25px 50px 75px;
- 25px hàng đầu
- phải và trái 50px
- 75px dưới cùng
đệm: 25px 50px;
- trên và dưới 25px
- phải và trái 50px
phần đệm: 25px;
- tất cả 25px

Lưu ý: Giá trị đệm được thêm vào chiều rộng của phần tử và tùy thuộc vào nền của phần tử.

Nói cách khác, chúng ta có phần tử div có lớp div-1:

Div.div-1( chiều rộng: 150px; phần đệm: 25px;)

Trình duyệt sẽ thêm phần đệm trái và phải vào chiều rộng của phần tử. Kết quả chúng ta sẽ được một phần tử có chiều rộng 200px.

Thuộc tính biên giới

Thuộc tính CSS border cho phép bạn xác định kiểu và màu sắc của đường viền của một phần tử.

chiều rộng biên giới

Thuộc tính border-width được sử dụng để xác định độ rộng của đường viền. Chiều rộng được chỉ định bằng pixel hoặc sử dụng một trong các giá trị được xác định trước: mỏng, trung bình hoặc dày.

màu viền

Thuộc tính border-color dùng để xác định màu của đường viền. Màu sắc có thể được thiết lập theo những cách sau:

tên - tên của màu, ví dụ: “đỏ”
RGB - xác định giá trị RGB, ví dụ: "rgb(255,0,0)"
Hex - xác định giá trị hex, ví dụ: "#ff0000"

kiểu viền

dotted : Chỉ định đường viền chấm
nét đứt: Chỉ định đường viền nét đứt
Solid : Xác định đường viền dày
double : Xác định hai đường viền. Khoảng cách giữa chúng phụ thuộc vào giá trị độ rộng đường viền
rãnh : Xác định ranh giới thụt lề 3D
Ridge : Xác định đường viền nổi 3D
inset : Xác định đường viền để khối lắc lư thụt vào
outset: Xác định ranh giới sao cho khối lăn lồi

Bạn có thể viết các thuộc tính đường viền của phần tử theo cách viết tắt:

Div.div-2( đường viền:1px rắn #ccc; )

Thuộc tính ký quỹ

Thuộc tính lề CSS chỉ định lượng không gian xung quanh một phần tử. Lề xóa khoảng trống xung quanh phần tử (bên ngoài đường viền). Lề không có màu nền và luôn trong suốt.

Bạn có thể xác định giá trị lề cho một phần tử như thế này:

lề trên: 100px;
lề dưới: 100px;
lề phải:50px;
lề trái:50px;

Mục này có thể được rút ngắn:

lề:25px 50px 75px 100px;
- lề trên 25px
- lề phải 50px
- lề dưới 75px
- lề trái 100px
lề:25px 50px 75px;
- lề trên 25px
- lề phải và trái 50px
- lề dưới 75px
lề:25px 50px;
- lề trên và dưới 25px
- lề phải và trái 50px
lề:25px;
- cả bốn lề đều 25px

Sử dụng các giá trị lề mặc định, bạn có thể căn giữa khối theo chiều ngang.

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 khoảng cách 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.

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) phần lề chỉ được đặt giữa các phần tử liền kề của ngôi nhà trên cây.

Trong ví dụ có 3 danh sách, theo cấu trúc sau:

Xa, xa, vượt quá lời nói.

... ...

Việc thụt lề được thực hiện không phải gây thiệt hại cho các phần tử con mà gây thiệt hại cho các phần tử lân cận.

Trong trường hợp này, .main-section__item là phần cuối cùng có thể được thụt vào để phân tách các danh sách. Hiệu ứng tương tự có thể đạt được bằng cách thụt lề một div, một danh sách, một dòng hoặc một liên kết, nhưng điều này sẽ không 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.

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.

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ụ.

Đây là một menu ngang và logo (vì lý do nào đó nó nằm ở 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 nằm ở hướng lề mà ở chỗ không thừa // .item + .item (margin-top: 20px; ) // hoặc // .item ( / / các kiểu khác // & + & ( lề-top: 20px; ) )

Ngoại lệ

Tất nhiên, có những trường hợp đặc biệt, những nhiệm vụ không hề nhỏ và những sắc thái không thể tuân thủ những nguyên tắc này, nhưng nếu không thì bạn nên cố gắng tạo ra những vết lõm lý tưởng để làm cho bố cục gọn gàng nhất có thể.

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, sự khác biệt lớn nhất giữa phần đệm và lề là lề dọc tự động co lại trong khi 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ữ lại.

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.

Sơ đồ dưới đây đưa ra ý tưởng trực quan ngay lập tức 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à phần đệ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à phần đệm. > khi bạn tùy chỉnh hình thức của chính 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 trường được đặt chồng lên nhau, chúng sẽ thu gọn về kích thước của tập hợp trường lớn nhất. 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ó khoảng đệm trên cùng là 20 pixel và khoảng đệm dưới cùng là 15 pixel 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 khoảng cách là 35 pixel 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ũ hơn như Internet Explorer đã 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 đang đền bù cho một lỗi trình duyệt rất khác mà nhà cung cấp *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ó một giải pháp hiệu quả và giải pháp 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ù đắp.

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 nội dung của mình. 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.

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.

Các phần tử trong CSS được biểu diễn dưới dạng hộp hình chữ nhật. Kích thước của khối hình chữ nhật được xác định bởi các thuộc tính của phần tử: nội dung, phần đệm, khung, lề.

Vùng nội dung của phần tử nằm ở giữa. Tiếp theo, phần đệm bao quanh khu vực nội dung. Khung bao quanh phần đệm và lề là lớp bên ngoài, tức là. nó nằm ngoài phần tử. Để hiểu rõ hơn những gì chúng ta đang nói đến, dưới đây là một sơ đồ.

Như bạn có thể thấy từ sơ đồ, phần đệm là một lớp mở rộng một phần tử từ mép ngoài của vùng nội dung đến mép trong của khung. Thuộc tính này kiểm soát khoảng cách giữa đường viền của phần tử và nội dung của nó. Phần đệm ảnh hưởng đến kích thước của một phần tử trên một trang nhưng nó không ảnh hưởng đến khoảng cách giữa các phần tử trên một trang.

Nếu bạn cần tăng hoặc giảm khoảng cách giữa các phần tử, hãy sử dụng lề. Thuộc tính lề không ảnh hưởng đến kích thước của phần tử dưới bất kỳ hình thức nào.

Điều quan trọng cần nhớ là kích thước của tất cả các khối trên trang web phụ thuộc vào mô hình khối được sử dụng. Có hai mô hình khối: mô hình khối W3C, mô hình khối truyền thống.

Theo mô hình khối W3C, chiều rộng của một phần tử được tính từ nội dung của khối mà không tính đến phần đệm và lề. Khoảng đệm và đường viền được thêm vào phía trên các kích thước đã chỉ định, điều này có thể dẫn đến những hậu quả không mong muốn cho bố cục trang.

Ví dụ: hãy lấy một khối có chiều rộng 200px và chiều cao 200px, đệm 10px ở tất cả các cạnh và đường viền 2px ở tất cả các cạnh. Trình duyệt không nhìn thấy khối 200px. Trình duyệt tính toán không gian ngang cần thiết để hiển thị khối và nó là 224px: 200(width)+2(left border)+10(left đệm)+10(right đệm)+2(right border)=224px. Vì đây là hình vuông nên chiều cao cũng sẽ là 224px.

Mặt khác, mô hình khối truyền thống lấy tổng nội dung, phần đệm và đường viền làm chiều rộng. Điều này có nghĩa là nếu khối của bạn rộng 200px, trình duyệt sẽ tính toán không gian ngang cần thiết để hiển thị nó và nó sẽ là 200px, bao gồm cả phần đệm và đường viền. Kết quả dễ dự đoán hơn và dễ làm việc hơn.

Theo mặc định, tất cả các trình duyệt đều sử dụng mô hình khối W3C. Mô hình có thể được đặt thủ công bằng thuộc tính kích thước hộp. Hai giá trị được chấp nhận: content-box (W3C) và border-box (model truyền thống). Mô hình truyền thống trực quan hơn, điều này khiến nó trở nên phổ biến nhất đối với các nhà phát triển web.

Dưới đây là cách sử dụng kích thước hộp để sử dụng mô hình truyền thống trong dự án của bạn:

html ( kích thước hộp: hộp viền; ) *, *:trước, *:sau ( kích thước hộp: kế thừa; )

html (

box - sizing : đường viền - hộp ;

* , * : trước , * : sau (

kích thước hộp : kế thừa ;

Nếu bạn nhớ mọi thứ nhanh hơn khi tự mình làm mọi việc, hãy thử trải nghiệm bản demo tương tác thú vị của Guy Routledge.

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%;

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à vấn đề lớn nhất. 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á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. Do kích thước phông chữ khác nhau nên 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.

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

Đô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ụ:

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.

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

Trong chương trước, chúng tôi đã đề cập đến các thuộc tính CSS như lề và phần đệm. 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, lề 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 nào - px, em, %, v.v. Ví dụ: lề-top: 15px .

Ngoài ra còn có một thứ rất tiện lợi gọi là tốc ký CSS lề và đệ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.

Hãy tưởng tượng tình huống: hai phần tử khối được đặt chồng lên nhau và chúng đượ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 khác nhau trong các tình huống 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ố âm nhỏ hơn) sẽ được chọn. 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 các đơn vị CSS khác nhau, chúng sẽ được chuyển đổi thành một, sau đó chúng được so sánh và giá trị lớn hơn sẽ đượ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.