Câu hỏi Khi nào sử dụng margin vs padding trong CSS


Khi viết CSS, có quy tắc hoặc hướng dẫn cụ thể nào nên được sử dụng trong việc quyết định thời điểm sử dụng hay không margin và khi nào nên sử dụng padding?


1973
2018-02-03 03:20


gốc




Các câu trả lời:


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

Với tôi sự khác biệt lớn nhất giữa padding và margin là theo chiều dọc lề tự động thu gọn và đệm không. Hãy xem xét hai yếu tố trên mỗi 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 toà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ử đầu tiên, 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. Vì vậy, nội dung của hai yếu tố sẽ kết thúc cách nhau 2em.

Bây giờ thay thế đệm đó bằng lề 1em. Các lề được coi là nằm ngoài phần tử và các lề của các mục lân cận 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à 1em của lề 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ố này chỉ cách nhau 1m.

Đ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 1em khoảng cách xung quanh một phần tử, bất kể phần tử bên cạnh là gì.

Hai sự khác biệt lớn khác là vùng đệm được bao gồm trong vùng nhấp chuột và màu nền / hình ảnh nền, nhưng không bao gồm lề.


1217
2018-02-07 20:59



+1 Khi tạo kiểu chữ và trình tự abritary của đoạn văn, tiêu đề và danh sách của nó gần như luôn luôn tốt hơn để không gian các phần tử có lề vì hành vi thu hẹp lề liền kề. - Pete B
Bạn nên đề cập rằng chỉ có lợi nhuận dọc sẽ sụp đổ, lợi nhuận ngang không bao giờ sụp đổ. Xem Đặc tả CSS 2.1 để biết thêm chi tiết. - JPelletier
Tại sao lợi nhuận theo chiều dọc sụp đổ trong khi các đường ngang không? Điều đó có thể gây nhầm lẫn cho rất nhiều người - marcospgp
Các lề thẳng đứng chỉ sụp đổ cho các phần tử khối. Đối với các phần tử khối nội tuyến, các lề được thêm cả theo chiều dọc và chiều ngang. Vì vậy, tôi không chắc chắn rằng đó là một vấn đề mà lợi nhuận ngang không sụp đổ trên các yếu tố khối kể từ khi họ điền vào anyways container của họ. - Mike
"Theo mặc định, tôi sử dụng lề ở mọi nơi, trừ khi tôi có đường viền hoặc nền và muốn tăng khoảng trống bên trong hộp hiển thị đó". - Lưu ý tuyệt vời, tôi có xu hướng làm theo cách khác và luôn đấu tranh với sự nhất quán. - Yannic Welle


Ký tự ở 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
  • Sử dụng padding để di chuyển các nội dung ra khỏi các cạnh của khối.

enter image description here


1338
2018-02-03 03:22



nhưng câu trả lời đúng là bởi @pavon bên dưới. lề của các phần tử lân cận chồng lên nhau trong khi phần đệm không trùng nhau. tôi. e., tách tổng số là padding(A) + padding(B) + max(margin(A), margin(B)) - necromancer
Đây là một thực hành tốt: sử dụng đường viền màu đỏ chắc chắn để kiểm tra phần đệm và lề. Đôi khi, chúng tôi có thể làm hỏng những thứ như <a>, chứa một số văn bản, được bao quanh bởi phần đệm và lề. Sử dụng thủ thuật này để kiểm tra dung lượng chúng ta có thể nhấp. - chenghuayang


Điều tốt nhất tôi đã thấy giải thích điều này với các ví dụ, sơ đồ và thậm chí là chế độ xem 'tự thử nghiệm' là đây.

Sơ đồ dưới đây tôi nghĩ là có một sự hiểu biết trực quan về sự khác biệt.

enter image description here

Một điều cần nhớ là trình duyệt tuân thủ các tiêu chuẩn (IE quirks là một ngoại lệ) chỉ hiển thị phần nội dung theo chiều rộng đã cho, vì vậy hãy theo dõi điều này trong các phép tính bố cục. Cũng lưu ý rằng hộp biên giới nhìn thấy phần nào của một sự trở lại với Bootstrap 3 hỗ trợ nó.


525
2018-05-04 19:21



w3.org/TR/CSS2/box.html#box-dimensionsvà hình ảnh từ w3 w3.org/TR/CSS2/images/boxdim.png - JP Hellemons


MARGIN so với PADDING :

  1. Ký tự đượ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. Nơi đệ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ý tự 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

Margin vs Padding


77
2018-05-21 07:00



Tham chiếu biên giới, thay vì là mơ hồ 'Lề là ở bên ngoài của các phần tử khối trong khi đệm nằm ở bên trong.' bên ngoài / bên trong cái gì? Và bên ngoài / bên trong gợi ý một vị trí tĩnh, không phải là nó ảnh hưởng đến kích thước của phần tử chứa. Câu trả lời này làm rõ cho tôi. - nicodemus13


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 nghĩ về margin & padding 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ể hữu ích.

So sánh các phần tử khối với ảnh treo trên tường:

  • Các cửa sổ trinh duyệt giống như bức tường.
  • Các Nội dung giống như một bức ảnh.
  • Các lề giống như không gian tường giữa các bức ảnh được đóng khung.
  • Các đệm giống như tấm thảm quanh bức ảnh.
  • Các biên giới giống như đường viền trên khung.

Khi quyết định giữa margin & padding, đó là quy tắc hay để sử dụng lề khi bạn đang giãn cách một phần tử trong mối quan hệ với những 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ử đó. Lề sẽ không thay đổi kích thước của phần tử, nhưng phần đệm sẽ thường làm cho phần tử lớn hơn1.

1  Mô hình hộp mặc định này có thể được thay đổi bằng box-sizing thuộc tính.


73
2017-12-17 01:10



Thực ra tôi không đồng ý box-sizing: border-box làm "không gian cho nội dung nhỏ hơn". Đây là một fiddle với 2 hộp, nếu tôi giữ padding giống nhau và thêm "Active", sau đó "Deactivate" trên di chuột, nó không quan trọng nếu tôi sử dụng box-sizing. Nó vẫn sẽ mở rộng hộp. Tôi đã phải tối đa padding để dài nhất hộp sẽ mở rộng đến, sau đó sử dụng thử và sai để đến với một sự kết hợp phù hợp cho các từ khác đi vào hộp mà sẽ giữ cho nó cùng một chiều rộng cho mỗi từ: jsfiddle.net/navyjax2/ngzqqjah - vapcguy
Hey vapcguy, cảm ơn cho đầu vào của bạn. Câu nói của tôi nói chung là đúng, khi chiều rộng hoặc chiều cao được khai báo cho một phần tử, trong khi một phần tử có thứ nguyên không khai báo không thực sự bị ảnh hưởng bởi border-box (xem: jsfiddle.net/8yravLmL/1). Tôi sẽ làm cho câu trả lời của tôi sắc thái hơn để tránh nhầm lẫn. - stvnrynlds


Dưới đây là một số HTML thể hiện cách padding và margin ảnh hưởng đến khả năng nhấp và quá trình điền nền. Một đối tượng nhận được các nhấp chuột vào phần đệm của nó, nhưng các lần nhấp chuột vào một vùng đối tượng margin'd sẽ chuyển đến phần tử cha 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>


30
2018-02-09 05:29



bạn có thể chạy mã tương tự trên jsfiddle: jsfiddle.net/fschwiet/y74Nz/3 - Frank Schwieterman


Điều về lợi nhuận là bạn không cần phải lo lắng về chiều rộng của phần tử.

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

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


30
2018-02-03 05:35