2008-08-28 48 views
26

Tôi không chỉnh sửa CSS thường xuyên và hầu như mỗi lần tôi cần truy cập và google CSS box model để kiểm tra xem padding có nằm trong số bordermargin bên ngoài , hoặc ngược lại. (Chỉ cần kiểm tra lại và padding là bên trong).Cách nhớ trong CSS rằng lề nằm ngoài biên giới và đệm bên trong

Có ai có cách hay để ghi nhớ điều này không? Một ghi nhớ nhỏ, một lời giải thích tốt là tại sao tên là cách mà vòng ...

Trả lời

137

Khi làm việc với CSS cuối cùng sẽ khiến bạn phát điên lên ô đệm mà họ sẽ đưa bạn vào có đệm trên bên trong của các bức tường.

+11

Câu trả lời sáng tạo nhất cho câu hỏi kỹ thuật mà tôi từng thấy trong đời. – bruno077

+0

bạn đã thoát được chưa? –

+10

Và sẽ có một bảo vệ diễu hành (lề) xung quanh bên ngoài của bức tường. – JnBrymn

3

In sơ đồ từ phần Box Dimensions của đặc tả, và đặt nó trên tường.

3

Với tôi, "đệm" chỉ âm thanh bên trong hơn "lề". Có lẽ suy nghĩ về trang in sẽ giúp ích gì? Lề là các khu vực ở bên ngoài - nói chung, bạn thậm chí không thể in ra mép - chúng không được đánh dấu. Trong những lợi nhuận đó, nội dung có thể được đệm để cung cấp thêm một rào cản giữa nội dung và lợi nhuận?

Khi bạn làm việc đủ CSS, nó sẽ trở thành bản chất thứ hai để ghi nhớ điều này.

1

sử dụng firebug để giúp bạn xem.

3

Tôi vừa mới học qua thời gian - mô hình hộp khá đơn giản nhưng lý do chính khiến mọi người thấy khó là vì body không thể phá vỡ mô hình.

Thực sự, nếu bạn cung cấp body lề và nền, bạn sẽ thấy nó được bao quanh bởi dải trắng. Tuy nhiên, đây không phải là trường hợp - phần đệm của body giống như lề. Điều này thiết lập một vài điều không chính xác về mô hình hộp.

Tôi thường nghĩ về nó như thế này:

  • lề = khoảng cách xung quanh hộp;
  • border = mép của hộp;
  • padding = dấu cách bên trong hộp.
+0

Lý do chính là khó bởi vì "chiều rộng" bao gồm kích thước lề và lề. IMO ie5 thực sự có quyền này – kibibu

1

Tạo cho mình một bản định kiểu cơ sở nhận xét mà bạn có thể sử dụng làm mẫu bất cứ khi nào bạn cần tạo trang web mới hoặc chỉnh sửa trang web hiện tại.

Bạn có thể thêm vào nó khi bạn phát triển trong kiến ​​thức và áp dụng nó cho các trình duyệt khác nhau để xem những thứ khác nhau hoạt động như thế nào.

Bạn cũng sẽ có thể thêm nhận xét hoặc ví dụ về các nội dung hoặc nội dung khó nhớ khác có tính năng phản trực giác.

1

Thêm đường viền, thậm chí chỉ tạm thời. Khi bạn chơi với các con số, bạn sẽ thấy sự khác biệt.

Trong thực tế, biên giới tạm thời xung quanh các yếu tố là một cách hữu ích để làm việc, chẳng hạn bạn có thể thấy lý do tại sao nổi đang giảm vv

+0

Thay vì sử dụng đường viền, tôi thích sử dụng CSS outline - cùng một khái niệm, nhưng nó không ảnh hưởng đến bố cục. Vì vậy, nếu bạn có một div đó là 100% chiều rộng và thêm một biên giới, nó sẽ thêm một thanh cuộn ngang trong trình duyệt. "phác thảo" không có tác dụng như vậy! – user1380540

1

Tôi biết đây là một câu trả lời cho câu hỏi của bạn, nhưng chi tiết của một mẹo.Bất cứ khi nào tôi xử lý margin và padding, tôi sẽ thêm một đường viền xung quanh phần bạn đang làm việc, sau đó từ đó, nó cho tôi thấy căn phòng tôi phải làm việc cùng. Khi tôi đã hoàn tất, tôi xóa đường viền.

+0

Người đó ngay phía trên bạn đã đề xuất điều này – user1380540

3

Bạn đang sử dụng hộp. Nếu bạn đang đặt một cái gì đó trong một hộp, bạn sẽ đặt một số đệm bên trong để đảm bảo rằng nó không smack chống lại các bên. Margin sau đó sẽ là thứ khác.

2

Tim Saunders đưa ra một số lời khuyên tuyệt vời - khi lần đầu tiên tôi bắt đầu với CSS, tôi đã tạo một điểm xây dựng một bản định kiểu cơ sở tốt, được nhận xét đầy đủ. Biểu định kiểu đó đã thay đổi nhiều lần và vẫn là một nguồn tài nguyên tuyệt vời.

Tuy nhiên, khi tôi gặp sự cố về mô hình hộp của riêng mình, tôi bắt đầu sử dụng 'Mo Pi'. Như trong, "Tôi không đủ béo, tôi cần ăn mo pi." Lạ thật, nhưng nó làm việc cho tôi. Tất nhiên, tôi đặt trên hai mươi bảng trong khi học CSS ... ;-)

0

PAdding là PArt của PAinting của một phần tử: nó mở rộng phần tử của phần tử. Nó có ý nghĩa để nghĩ về một phần tử cặp + đệm như chia sẻ một nền chung. Padding tương tự như canvas của bức tranh: padding càng lớn, canvas càng lớn và do đó nền. Border (khung của bức tranh) sẽ đi xung quanh cặp đó. Và lề sẽ tách các bức tranh trên tường thư viện. Suy nghĩ về khái niệm nền đối tượng sẽ giúp ghép các đối tượng cặp + đệm lại với nhau. Những lời giải thích thông thường về những gì bên trong và bên ngoài không dính vào trí nhớ: sau một thời gian mọi người trở lại với sự nhầm lẫn ban đầu. Cũng nên nhớ rằng các lề có thể đóng mở theo chiều dọc và không được đệm.

2

Đệm thường được sử dụng bên trong. Hoặc là ở bên trong tường hoặc hộp giao hàng, điều đó thật đơn giản. Và nếu padding là bên trong, sau đó lề là bên ngoài. Không nên quá khó.

-1

Lề: Khi bạn muốn di chuyển khối. Đệm: Khi bạn muốn di chuyển các mục trong một khối.

0

Thay vì hỏi một lần nữa và một lần nữa để google bạn chỉ cần sử dụng cửa sổ thanh tra. Trong tab kiểu đó và cuộn xuống dưới, bạn có thể thấy như thế này.

enter image description here

Các vấn đề liên quan