Sự khác biệt giữa phần đệm và lề là gì? 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à phụ 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 với 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: Xác đị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ề 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.

Nguồn: Lề hoặc phần đệm?
Philip Sporrer.
Dịch: vl49.

Khi nào nên sử dụng lề và khi nào nên sử dụng phần đệm cho mục đích định dạng và liệu nó có tạo ra 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ẻ.

Triển khai ví dụ bằng CSS?

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.

Dấu cộng thực hiện chức năng gì?

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 lớp này, tên này có chứa quy tắc tương tự với thuộc tính lề như lớp .card không? Không, có một giải pháp tốt hơn.

Cú bị phá hủy *+* .

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.

Sau cùng.

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

... ...

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.

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 tôi quan tâm đến lề giữa các tin tức được đặt.blog-preview__item ( lề-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

21/11/16 2K

Hôm nay chúng ta sẽ tìm hiểu sự khác biệt giữa phần đệm HTML (phần đệm nội tuyến) và phần lề ( lề) trong CSS. Nhưng trước tiên, hãy hiểu cú pháp của họ. Có một số cách để viết các thuộc tính này: thông thường và viết tắt:

Phần đệm và lề trong CSS

Dạng ký hiệu thông thường cho các thuộc tính được đề cập sẽ dễ hiểu hơn vì nó giống với tất cả các ký hiệu kiểu khác:

Nhập thường xuyên:

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

Mặt khác, cách viết tắt CSS kết hợp tất cả các thuộc tính này thành một thuộc tính "đệm" chung.

Mục nhập ngắn gọn:

phần đệm: 10px 20px 40px 10px;

Phần đệm và lề có bốn giá trị: trên, phải, dưới và trái. Ký hiệu viết tắt ở trên cũng chỉ định bốn giá trị, cách nhau bằng dấu cách. Giá trị đầu tiên trong bốn giá trị là phần đệm ở trên cùng, sau đó là phần đệm ở bên phải, dưới cùng (phần đệm HTML phía dưới) và ở bên trái:

phần đệm: TRÊN PHẢI DƯỚI TRÁI; (phần đệm: trên cùng bên phải dưới cùng bên trái)

Mục nhập này có thể được giảm xuống còn ba giá trị nếu phần đệm/lề bên trái và bên phải giống nhau. Ví dụ: nếu lề trên là 30px, lề trái và phải là 10px, lề dưới là 40px thì bạn có thể sử dụng ký hiệu sau:

phần đệm: 30px 10px 40px;

Chúng tôi giảm nó xuống còn hai giá trị!

Nếu phần đệm/lề trên và dưới giống nhau và phần đệm/lề bên phải và bên trái cũng giống nhau thì chỉ có thể chỉ định hai giá trị. Trong ví dụ này, chúng ta có phần đệm trên và dưới là 10px, phần đệm bên trái và bên phải là 20px. CSS của chúng ta sẽ trông như thế này:

phần đệm: TRÊN/DƯỚI PHẢI/TRÁI; (phần đệm: trên/dưới bên phải/trái) phần đệm: 10px 20px;

Chỉ có một ý nghĩa!

Của chúng tôi phiên bản mới nhất tốc ký cho phần đệm và lề HTML chỉ chứa một giá trị. Ký hiệu này có thể được sử dụng khi tất cả các thụt lề (trên, dưới, phải và trái) có cùng giá trị. Nếu chúng ta muốn tất cả các cạnh có khoảng đệm 20px, CSS sẽ trông như thế này:

Khi nào nên sử dụng định dạng ghi nào? Ví dụ: nếu tôi chỉ muốn cung cấp cho một phần tử phần đệm dưới cùng, tôi sẽ sử dụng ký hiệu thông thường vì tôi chỉ cần áp dụng thuộc tính cho một bên: đệm-bottom: 30px ;

Cách làm việc với PADDING và MARGIN

Có một sự khác biệt đáng chú ý giữa hai thuộc tính này. Phần đệm được sử dụng để xác định không gian trong vùng chứa của phần tử HTML. Lề được sử dụng để xác định khoảng cách xung quanh đường viền bên ngoài của các phần tử.

Hãy tưởng tượng đệm đang khoác một chiếc áo khoác mùa đông cho bạn. Chiếc áo khoác là một phần của bạn, nhưng nếu tôi ném sơn vào bạn, nó sẽ bao phủ một vùng rộng hơn so với khi bạn không mặc chiếc áo khoác đó.

Bạn cũng có thể coi phần đệm như là phần đệm trong thùng các - tông. Khi bạn đổ đầy bọt vào hộp, bạn dùng nó để giữ đồ bên trong cách xa mép hộp. Phần đệm trong CSS cũng làm điều tương tự.

Bây giờ hãy coi lề như một trường lực vô hình xung quanh bạn. Trường lực giữ những thứ khác tránh xa bạn. Quay lại ví dụ về chiếc áo khoác và sơn, nếu tôi ném sơn vào bạn và nó có thể xuyên qua trường lực thì nó vẫn chỉ bao phủ bạn và chiếc áo khoác của bạn.

PADDING và MARGIN trên ví dụ về một trang web

Hãy xem xét các thuộc tính bằng cách sử dụng các ví dụ có phần tử. Chúng ta sẽ bắt đầu bằng một đoạn văn (thẻ

), sau đó thêm màu nền cho nó và thêm phần đệm 30px ở mỗi bên.

Bên dưới bên trái, bạn có thể thấy đó là một đoạn văn có khoảng đệm 30px xung quanh. Trong hình bên phải tôi đã sử dụng các công cụ Google Chromeđể hiển thị nơi phần đệm HTML bắt đầu/kết thúc cho phần tử này. Màu xanh lá cây trong hình ảnh bên dưới là phần đệm được đặt xung quanh vùng chứa. Màu nền xanh đậm lấp đầy khu vực bên trong:

Bây giờ hãy thêm lề vào đoạn văn. Tôi sẽ thêm phần đệm trên và dưới 30px, cũng như 20px bên trái và bên phải. Hình ảnh bên trái bên dưới cho thấy đoạn này đã thay đổi như thế nào từ lề. Chiều rộng thực tế của hình ảnh đã trở nên nhỏ hơn do lề bị đẩy ra xa khỏi viền của hình ảnh khác phần tử HTML. Ở bên phải bạn có thể thấy điều đó màu cam– đây là lề xung quanh phần tử. lề luôn nằm ngoài phần đệm và nền màu xanh đậm không mở rộng vào vùng lề.

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ó 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 một phần tử nội tuyến không thể chứa phần tử con, chẳng hạn 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.