Удалить дополнение для пустого элемента

Я создаю страницу для предстоящего сайта портала, и у меня есть элемент HTML с некоторым дополнительным контентом. Я бы хотел, чтобы элемент не отображался, если он пуст, но добавление некоторого дополнения к нему заставляет его визуализировать. Как добавить дополнение к контенту, но только если контент присутствует?

.someElement{padding-top: 5px;}

HTML в вопросе:

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

В принципе, я бы хотел, чтобы второй элемент, выше, не занимал места. Я тестирую во всех основных браузерах, используя XHTML 1.1 doctype.

Ответ 1

Вы можете сделать трюк с помощью pesudo-класса CSS3: empty

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

К сожалению, Internet Explorer еще не поддерживает эту функцию. Для всех других браузеров это будет прекрасно...

Ответ 2

Дайте элементу атрибут id. Затем вы можете использовать Javascript для проверки его свойства innerHTML после загрузки страницы. Если innerHTML имеет длину, равную нулю, вы можете установить для свойства display значение none. Эта страница может помочь, если вы не знаете свой javascript.

Это по-прежнему сложный способ играть. Если вы знаете, что элемент не должен отображаться перед тем, как вы будете обслуживать страницу, лучше вообще опустить его. Если вы не хотите опустить элемент, просто спрячьте его, а затем заставьте его скрывать; style="display: none"

Ответ 3

Если необходимо иметь div.someElement в HTML, лучшим способом CSS/HTML для этого было бы добавить дополнительный div вокруг добавленного содержимого, обладающего свойством padding

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

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

В противном случае сделайте, как говорит Пекка, или взгляните на то, что javascript сделает это за вас.

Ответ 4

<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>

Добавление отображения: таблица; должен сделать трюк.

Ответ 5

Я не могу думать о CSS только для этого.

Я попытался бы решить, будет ли элемент отображаться в то время, когда я знаю, будет ли в нем какой-либо контент. Это, наверное, самое чистое решение.

Ответ 6

Дайте пустому элементу другой класс (скажем someHiddenElement), когда вы создаете контент. Затем добавьте someHiddenElement { display: none } в таблицу стилей.

Ответ 7

В том месте, где вы заполняете необязательный div, если в него нет текста, попробуйте изменить свойство CSS display на none. В соответствии с этот источник (и другие), display: none полностью удаляет элемент из документа. Он не занимает места, хотя HTML для него все еще находится в исходном коде.

Ответ 8

Не используйте отступы на контейнере, используйте поля для содержимого. Чем когда нет содержимого, контейнер остается невидимым.