Estoy generando una página para un sitio de portal próximo, y tengo un elemento HTML con contenido opcional. Me gustaría que el elemento no se renderice si está vacío, pero al agregarle algo de relleno, se renderiza. ¿Cómo agrego relleno al contenido, pero solo si el contenido está presente?
.someElement{padding-top: 5px;} HTML en cuestión:
With padded content
Básicamente, me gustaría que el segundo elemento, arriba, no ocupe espacio. Estoy probando en todos los navegadores principales, utilizando el doctype XHTML 1.1.
Puedes hacer el truco con la pseudo-clase CSS3: vacío
.someElement { // your standard style } .someElement:empty { display:none; }
Lamentablemente, el explorador de Internet todavía no es compatible con esa característica. Para todos los otros navegadores lo hará bien …
Dale al elemento un atributo de id . Luego puedes usar Javascript para verificar su propiedad innerHTML una vez que la página se haya cargado. Si innerHTML tiene una longitud de cero, entonces puede establecer su propiedad de visualización en ninguna. Esta página puede ayudar si no conoce su javascript.
Esta sigue siendo una mala forma de jugar. Si sabe que el elemento no se debe representar antes de servir la página, sería mejor omitirlo por completo. Si no quieres omitir el elemento, simplemente escóndelo, luego ocúltalo; style="display: none"
With padded content
Añadiendo display: tabla; debe hacer el truco
Si es necesario tener el elemento div.someElement en el HTML, la mejor manera de hacerlo sería agregar un div adicional alrededor del contenido agregado que tiene la propiedad de relleno.
.someElement > div{padding-top:5px;} Content
De lo contrario, haga lo que le dice Pekka o eche un vistazo a javascript y hágalo por usted.
No puedo pensar en una única forma de hacer eso con CSS.
Intentaría decidir si el elemento se representa en el momento en que sé si habrá algún contenido en él. Esa es probablemente la solución más limpia.
Asigne una clase diferente al elemento vacío (digamos someHiddenElement ) cuando genere el contenido. Luego agregue someHiddenElement { display: none } a su hoja de estilo.
En el punto en el que rellena el div opcional, si no hay texto para poner en él, intente cambiar la propiedad de display CSS a none. De acuerdo con esta fuente (y otras), display: none elimina el elemento completamente del documento. No ocupa ningún espacio, a pesar de que el HTML para él todavía está en el código fuente.
No use relleno en el contenedor, use margen en el contenido. Que cuando no hay contenido, el contenedor permanece invisible.