Xóa phần đệm cho phần tử trống

Question

Tôi đang tạo trang cho một trang web cổng thông tin sắp tới và tôi có một phần tử HTML với một số nội dung tùy chọn. Tôi muốn phần tử không hiển thị nếu nó rỗng, nhưng thêm một số phần đệm vào nó làm cho nó render. Làm cách nào để thêm đệm vào nội dung, nhưng chỉ khi nội dung có mặt?

.someElement{padding-top: 5px;} 

HTML trong câu hỏi:

<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div> 

Về cơ bản, tôi muốn phần tử thứ hai, trên, để không mất bất kỳ không gian. Tôi đang thử nghiệm trong tất cả các trình duyệt chính, sử dụng loại tài liệu XHTML 1.1.

Answer 1

Bạn có thể làm các trick với CSS3 pesudo-lớp: trống

.someElement 
{ 
    // your standard style 
} 
.someElement:empty 
{ 
    display:none; 
} 

Đáng buồn là Internet Explorer không hỗ trợ feauture đó được nêu ra. Đối với tất cả các trình duyệt khác, nó sẽ hoạt động tốt ...

Answer 2

Tôi không thể nghĩ ra cách CSS để thực hiện điều đó.

Tôi sẽ cố gắng quyết định liệu phần tử có được hiển thị vào thời điểm tôi biết liệu có nội dung nào trong đó hay không. Đó có lẽ là giải pháp sạch nhất.

Answer 3

Nếu đó là cần thiết để có div.someElement trong HTML, cách CSS/HTML tốt nhất để làm điều đó sẽ được bổ sung thêm một div xung quanh nội dung nói thêm rằng có tính chất đệm

.someElement > div{padding-top:5px;} 

<div class="someElement"><div>Content</div></div> 

Nếu không , làm như Pekka nói, hoặc hãy xem javascript có làm điều đó cho bạn.

Answer 4

Tại điểm mà bạn cư trú trong các tùy chọn div, nếu không có văn bản để đưa vào đó, hãy thử thay đổi thuộc tính CSS display để none. Theo this source (và những người khác), display: none loại bỏ yếu tố hoàn toàn từ các tài liệu. Nó không chiếm bất kỳ không gian nào, mặc dù HTML cho nó vẫn nằm trong mã nguồn.

Answer 5

Cung cấp cho phần tử một thuộc tính id. Sau đó, bạn có thể sử dụng Javascript để kiểm tra thuộc tính innerHTML của nó khi trang đã tải. Nếu innerHTML có độ dài bằng 0 thì bạn có thể đặt thuộc tính display là none. This page có thể giúp ích nếu bạn không biết javascript của mình.

Đây vẫn là cách để chơi. Nếu bạn biết phần tử không được hiển thị trước khi bạn phân phát trang, tốt nhất là nên bỏ qua nó. Nếu bạn không muốn bỏ qua phần tử, chỉ cần ẩn nó, sau đó ép nó vào ẩn; style="display: none"

Answer 6

Cung cấp cho phần tử trống một lớp khác (ví dụ: someHiddenElement) khi bạn tạo nội dung. Sau đó, thêm someHiddenElement { display: none } vào biểu định kiểu của bạn.

Answer 7

<style> 
.someElement{padding-top: 5px; display:table;} 
</style> 
<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div> 

Thêm display: table; nên làm các trick.

Answer 8

Không sử dụng đệm trên vùng chứa, sử dụng lề trên nội dung. Hơn khi không có nội dung, thùng chứa vẫn vô hình.