web-dev-qa-db-fra.com

Supprimer le rembourrage d'un élément vide

Je génère une page pour un site portail à venir, et j'ai un élément HTML avec du contenu facultatif. J'aimerais que l'élément ne soit pas rendu s'il est vide, mais en y ajoutant du rembourrage, il sera rendu. Comment ajouter un remplissage au contenu, mais uniquement si le contenu est présent?

.someElement{padding-top: 5px;}

HTML en question:

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

En gros, j'aimerais que le deuxième élément ci-dessus ne prenne pas de place. Je teste dans tous les principaux navigateurs, en utilisant le doctype XHTML 1.1.

htmlcsscross-browser
44
Eric Falsken

Vous pouvez faire l'affaire avec la pseudo-classe CSS3: vide

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

Malheureusement, Internet Explorer ne prend pas encore en charge cette fonctionnalité. Pour tous les autres navigateurs, il fera très bien l'affaire ...

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

Ajout d'affichage: table; devrait faire l'affaire.

5
vencedor

Attribuez à l'élément un attribut id. Vous pouvez ensuite utiliser Javascript pour vérifier sa propriété innerHTML une fois la page chargée. Si innerHTML a une longueur de zéro, vous pouvez définir sa propriété d'affichage sur aucune. Cette page pourrait aider si vous ne connaissez pas votre javascript.

C'est toujours une façon amusante de jouer. Si vous savez que l'élément ne doit pas être rendu avant de servir la page, il serait préférable de l'omettre complètement. Si vous ne voulez pas omettre l'élément, cachez-le simplement, puis forcez-le à se cacher; style="display: none"

5
deau

Si c'est nécessaire pour avoir le div.someElement dans le HTML, la meilleure façon CSS/HTML de le faire serait d'ajouter un div supplémentaire autour du contenu ajouté qui a la propriété padding

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

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

Sinon, faites comme Pekka le dit, ou essayez de faire javascript pour vous.

3
munch

Je ne peux pas penser à un seul moyen CSS pour le faire.

J'essaierais de décider si l'élément est rendu au moment où je sais s'il y aura du contenu. C'est probablement la solution la plus propre.

2
Pekka

Donnez à l'élément vide une classe différente (par exemple someHiddenElement) lorsque vous générez le contenu. Puis ajouter someHiddenElement { display: none } à votre feuille de style.

2
Matteo Riva

Au moment où vous remplissez le div facultatif, s'il n'y a pas de texte à y mettre, essayez de changer la propriété CSS display en none. Selon cette source (et d'autres), display: none supprime complètement l'élément du document. Il ne prend pas de place, même si le code HTML est toujours dans le code source.

0
DOK

N'utilisez pas de remplissage sur le conteneur, utilisez la marge sur le contenu. Que lorsqu'il n'y a pas de contenu, le conteneur reste invisible.

0
vito78