Khi nào nên sử dụng lề so với đệm trong CSS [đã đóng]

Khi viết CSS, có một quy tắc hoặc hướng dẫn cụ thể nào nên được sử dụng để quyết định khi nào nên sử dụng marginvà khi nào nên sử dụng padding?

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

Đối với tôi, sự khác biệt lớn nhất giữa phần đệm và phần lề là phần lề tự động thu gọn và phần đệm không.

Xem xét hai yếu tố một trên các yếu tố khác với đệm 1em. Phần đệm này được coi là một phần của phần tử và luôn được bảo tồn.

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

Do đó, nội dung của hai yếu tố cuối cùng sẽ bị 2emtách rời.

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

Vì vậy, trong ví dụ này, bạn sẽ kết thúc với nội dung của phần tử đầu tiên theo sau là 1emlề kết hợp theo sau là nội dung của phần tử thứ hai. Vì vậy, nội dung của hai yếu tố chỉ 1emcách nhau.

Điều này có thể thực sự hữu ích khi bạn biết rằng bạn muốn nói 1emvề khoảng cách xung quanh một phần tử, bất kể nó nằm bên 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 và màu nền / hình ảnh, nhưng không phải là lề.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Margin ở bên ngoài các phần tử khối trong khi phần đệm nằm ở bên trong.

• Sử dụng lề để tách khối khỏi những thứ bên ngoài nó
• Sử dụng phần đệm để di chuyển nội dung ra khỏi các cạnh của khối.

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

Sơ đồ dưới đây tôi nghĩ cho một sự hiểu biết 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 ( quirks IE là một ngoại lệ ) chỉ hiển thị phần nội dung theo 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ũng lưu ý rằng hộp viền đang thấy phần nào sự trở lại với Bootstrap 3 hỗ trợ nó.

Có nhiều 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ề & phần đệm sẽ giúp bạn chọn thời điểm và cách sử dụng chúng, điều này có thể giúp ích.

So sánh các yếu tố khối với hình ảnh treo trên tường:

• Các cửa sổ trình duyệt cũng giống như bức tường.
• Các nội dung cũng giống như một bức ảnh.
• Các lề cũng giống như không gian bức tường giữa hình ảnh đóng khung.
• Phần đệm giống như lớp phủ xung quanh một bức ảnh.
• Đường viền giống như đường viền trên khung.

Khi quyết định giữa lề & đệm, đó là một quy tắc tốt để sử dụng lề khi bạn đặt một phần tử trong mối quan hệ với các thứ khác trên tường và đệm khi bạn điều chỉnh sự xuất hiện của chính phần tử đó. Ký quỹ 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 ¹ .

¹ Mô hình hộp mặc định này có thể được thay đổi với box-sizingthuộc tính .

MARGIN vs PADDING :

1. Margin được sử dụng trong một phần tử để tạo khoảng cách giữa phần tử đó và các phần tử khác của trang. Trong đó phần đệ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ử.

2. Ký quỹ 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ử.

Vui lòng tham khảo hình ảnh bên dưới được trích xuất từ Margin Vs Padding - Thuộc tính CSS

Từ https://www.w3schools.com/css/css_boxmodel.asp

Giải thích về các phần khác nhau:

• Nội dung - Nội dung của hộp, nơi xuất hiện văn bản và hình ảnh

• Đệm - Xóa một khu vực xung quanh nội dung. Phần đệm trong suốt

• Đường viền - Đường viền bao quanh phần đệm và nội dung

• Ký quỹ - Xóa một khu vực bên ngoài biên giới. Lề là trong suốt

Ví dụ trực tiếp (chơi xung quanh bằng cách thay đổi các giá trị): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Dưới đây là một số HTML minh họa cách thức paddingvà marginảnh hưởng đến khả năng nhấp và điền nền. Một đối tượng nhận được các lần nhấp vào phần đệm của nó, nhưng các lần nhấp vào khu vực lề của đối tượng sẽ đi đến phần chính của nó.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Vấn đề về tỷ suất lợi nhuận là bạn không cần phải lo lắng về độ rộng của phần tử.

Giống như khi bạn đưa ra thứ gì đó {padding: 10px;}, bạn sẽ phải giảm độ rộng của phần tử xuống 20px để giữ ' phù hợp ' và không làm phiền 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 paddings để có được mọi thứ ' packed' và sau đó sử dụng lề cho các điều chỉnh nhỏ.

Một điều khác cần lưu ý là phần đệm phù hợp hơn trên các trình duyệt khác nhau và IE không xử lý lợi nhuận rất tốt.

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

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

lưu ý rằng một số lần bạn phải sử dụng lề.

Thật tốt khi biết sự khác biệt giữa marginvà padding. Dưới đây là một số khác biệt:

• Margin là không gian bên ngoài của một phần tử, trong khi phần đệm là không gian bên trong của một phần tử.

• Lề là không gian bên ngoài đường viền của một phần tử, trong khi phần đệm là khoảng trống bên trong đường viền của phần tử.

• Ký quỹ chấp nhận giá trị của tự động : margin: auto, nhưng bạn không thể đặt phần đệm thành tự động.

• Ký quỹ có thể được đặt thành bất kỳ số nào, nhưng phần đệm phải không âm.

• Khi bạn tạo kiểu cho một phần tử, phần đệm cũng sẽ bị ảnh hưởng (ví dụ: màu nền), nhưng không phải là lề.

Một điều cần lưu ý là khi tự động thu gọn lề làm phiền bạn (và bạn không sử dụng màu nền cho các yếu tố của mình), một điều dễ dàng hơn là sử dụng phần đệm.

Giải thích về Margin so với Padding

Nó là không phù hợp để sử dụng paddingkhông gian nội dung trong một yếu tố; bạn phải sử dụng margincác yếu tố con thay thế. Các trình duyệt cũ hơn như Internet Explorer đã hiểu sai mô hình hộp trừ khi sử dụng marginnó hoạt động hoàn hảo trong Internet Explorer 4 .

Có hai trường hợp ngoại lệ khi sử dụng padding là phù hợp để sử dụng:

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

2. Bạn đang bù đắp cho một lỗi trình duyệt rất linh tinh mà nhà cung cấp * ho * Mozilla * ho * từ chối sửa và chắc chắn (ở mức độ bạn giữ trao đổi thường xuyên với các biên tập viên W3C và WHATWG) mà bạn phải có giải pháp hoạt động và giải pháp này sẽ không ảnh hưởng đến kiểu dáng của bất cứ thứ gì khác sau đó là lỗi mà bạn đang bù đắp.

Khi bạn có một yếu tố chiều rộng 100% với padding: 50px;bạn có hiệu quả nhận được width: calc(100% + 100px);. Kể từ khi marginđược không thêm vào widthnó sẽ không gây ra vấn đề bố trí bất ngờ khi bạn sử dụng margintrên child elementsthay vì paddingtrực tiếp trên phần tử.

Vì vậy, nếu bạn đang không thực hiện một trong hai điều này làm không thêm đệm để các phần tử nhưng để nó là con trực tiếp / trẻ em yếu tố (s) để đảm bảo bạn đang đi để có được những dự kiến hành vi trong tất cả các trình duyệt.

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

1) Margin

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

2) Đệm

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

Vì vậy, đơn giản Margins là không gian xung quanh các phần tử, trong khi Padding là không gian xung quanh nội dung là một phần của phần tử.

Hình ảnh này từ các nhà mã hóa cho thấy cách lề và đường viền trở nên khác biệt và cách hộp viền và hộp nội dung làm cho nó khác biệt.

Ngoài ra, họ xác định từng phần như dưới đây:

• Nội dung - phần này xác định vùng nội dung của hộp nơi chứa nội dung thực tế như văn bản, hình ảnh hoặc có thể các yếu tố khác cư trú.
• Đệm - điều này xóa nội dung chính từ hộp chứa của nó.
  
• Border - điều này bao quanh cả nội dung và phần đệm.
• Ký quỹ - khu vực này xác định một không gian trong suốt ngăn cách nó với các yếu tố khác.

Tôi luôn sử dụng nguyên tắc này:

Đây là mô hình hộp từ tính năng phần tử kiểm tra trong Firefox. Nó hoạt động như một củ hành tây:

• Nội dung của bạn ở giữa.
• Đệm là khoảng trống giữa nội dung của bạn và cạnh của thẻ nó nằm bên trong.
• Đường viền và thông số kỹ thuật của nó
• Lề là khoảng trống xung quanh thẻ.

Vì vậy, lề lớn hơn sẽ tạo thêm không gian xung quanh hộp chứa nội dung của bạn.

Phần đệm lớn hơn sẽ tăng không gian giữa nội dung của bạn và hộp chứa nội dung bên trong.

Không ai trong số họ sẽ tăng hoặc giảm kích thước của hộp nếu nó được đặt thành một giá trị cụ thể.

Ký quỹ

Ký quỹ thường được sử dụng để tạo khoảng cách giữa chính phần tử và phần tử bao quanh.

ví dụ tôi sử dụng nó khi tôi đang xây dựng một thanh điều hướng để làm cho nó dính vào các cạnh của màn hình và không có khoảng trắng.

Đệm

Tôi thường sử dụng khi tôi có một phần tử bên trong đường viền <div>hoặc thứ gì đó tương tự và tôi muốn giảm kích thước của nó nhưng tại thời điểm đó tôi muốn giữ khoảng cách hoặc lề giữa các phần tử khác xung quanh nó.

Rất ngắn gọn, đó là tình huống; nó phụ thuộc vào những gì bạn đang cố gắng làm.

Ký quỹ nằm ngoài hộp và phần đệm nằm trong hộp