CSS: Padding so với Height

Question

Trong khi tạo kiểu với CSS, tôi đã nhận thấy rằng thuộc tính padding có thể dễ dàng đạt được ảnh hưởng tương tự như thuộc tính chiều cao ... tuy nhiên thuộc tính padding giữ văn bản của tôi đẹp và trung tâm, trong khi thuộc tính chiều cao buộc tôi phải thêm các quy tắc CSS khác/điều chỉnh độ cao của dòng.

Có phải là "sai" hoặc các tiêu chuẩn CSS thường được sử dụng để bỏ qua thuộc tính chiều cao và sử dụng phần đệm cho chiều cao của phần tử thay thế không?

Tác động nào có thể mang lại?

Answer 1

Cả chiều cao và phần đệm kiểm soát chiều cao của phần tử. Tôi sẽ phải không đồng ý rằng việc sử dụng padding là sai, nhưng thay vào đó phụ thuộc vào trường hợp sử dụng cụ thể.

Sử dụng chiều cao khi bạn cần kích thước vùng chứa cố định.

• PRO: hữu ích khi bạn không muốn các container để kéo dài theo chiều dọc.
• CON: trở thành giòn khi bạn thay đổi các thuộc tính như font-size, lợi nhuận, đệm vv
  • kích thước tăng có thể gây ra nội dung để ẩn hoặc tràn.
  • Thay đổi font-size, ví dụ, có thể gây ra một sự thay đổi cascade (bạn còn phải thay đổi lề/đệm, hoặc tính kích thước của các yếu tố anh chị em/trẻ em.

Sử dụng đệm khi bạn không cần phải có chiều cao thùng chứa cố định, nhưng muốn thêm khoảng trắng

• PRO:. Dễ dàng hơn để thay đổi font-kích thước, lề, miếng đệm, và thêm nội dung bổ sung cho các thùng chứa có thể incre ase kích thước thẳng đứng của vùng chứa.
• CON: Việc thêm nội dung/thuộc tính kích thước ngày càng tăng sẽ khiến vùng chứa trải dọc theo chiều dọc, điều này không mong muốn trong một số trường hợp.
  • Không tốt cho các trường hợp không gian dọc bị giới hạn hoặc cần được kiểm soát.

Sử dụng min-height và max-height cho một cách tiếp cận lai.

• PRO: Buộc chiều cao cố định, nhưng cho phép nội dung phát triển năng động cho đến khi nó đạt đến rằng phút hoặc tối đa.
• CON: Bạn vẫn gặp sự cố cập nhật "xếp tầng" với thuộc tính kích thước và nội dung được thêm khi bạn nhấn tối thiểu hoặc tối đa.

Answer 2

Có, sử dụng đệm để kiểm soát chiều cao của phần tử là sai.

height kiểm soát chiều cao thực tế của phần tử (về cơ bản là khoảng cách từ border-bottom để border-top) trong khi padding kiểm soát khoảng cách giữa nội dung và biên giới.