Eliminar relleno para un elemento vacío

Estoy generando una página para un sitio de portal próximo, y tengo un elemento HTML con algún contenido opcional. Me gustaría que el elemento no se presente si está vacío, pero agregarle algo de relleno hace que se renderice. ¿Cómo agrego relleno al contenido, pero solo si el contenido está presente?Eliminar relleno para un elemento vacío

.someElement{padding-top: 5px;}

HTML en cuestión:

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

Básicamente, me gustaría que el segundo elemento, por encima, a no ocupa espacio. Estoy probando en todos los principales navegadores, usando XHTML 1.1 doctype.

Fuente

2010-01-02 Eric Falsken

100

Usted puede hacer el truco con el Pesudo clase CSS 3: vacío

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

Lamentablemente explorador de Internet no soporta que feauture todavía. Para todos los demás buscadores, funcionará bien ...

Fuente

2010-03-17 08:41:20 MindTailor

IE9 es compatible también con esto: https://developer.mozilla.org/en-US/docs/CSS/:empty – Town

No puedo pensar en una forma única de CSS para hacer eso.

Intentaré 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.

Fuente

2010-01-02 21:01:52

Si es necesaria que tienen la div.someElement en el HTML, la mejor manera de CSS/HTML para hacer eso sería añadir un extra div todo el contenido añadido que tiene la propiedad de relleno

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

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

lo contrario , haz lo que dice Pekka, o echa un vistazo a que javascript lo haga por ti.

Fuente

2010-01-02 21:11:59 munch

En el punto donde se rellenan de la div opcional, si no hay texto para poner en ella, trate de cambiar la propiedad CSS display a none. Según this source (y otros), display: none elimina el elemento completo del documento. No ocupa espacio, a pesar de que el HTML para él todavía está en el código fuente.

Fuente

2010-01-02 21:18:05 DOK

Proporcione al elemento un atributo id. A continuación, puede usar Javascript para verificar su propiedad innerHTML una vez que la página se haya cargado. Si innerHTML tiene una longitud de cero, puede establecer su propiedad de visualización en ninguno. This page podría ayudar si no conoce su javascript.

Esta es una manera muy sucia de jugar. Si sabe que el elemento no debe procesarse antes de publicar la página, sería mejor omitirlo por completo. Si no quieres omitir el elemento, simplemente ocúltalo y luego ocúltalo para que se oculte; style="display: none"

Fuente

2010-01-02 21:18:57 deau

No necesita necesariamente darle una propiedad 'id'. Pero +1 independientemente, creo que JavaScript es el camino a seguir aquí. Eche un vistazo a jQuery para hacer esto fácil: http: // jquery.com/ –

Las páginas que se renderizan así, parecen un poco tontas: primero se carga y se aplica CSS (representando un espacio de 5 píxeles, como en este ejemplo) y luego se aplican las correcciones JS, el espacio desaparece. – naivists

@naivists: estuvo de acuerdo, pero es difícil moverse si está sirviendo HTML estático. – deau

Proporcione al elemento vacío una clase diferente (por ejemplo, someHiddenElement) cuando genere el contenido. A continuación, agregue someHiddenElement { display: none } a su hoja de estilos.

Fuente

2010-01-02 21:19:15

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

Añadiendo display: table; debería hacer el truco.

Fuente

2012-06-20 08:51:06 vencedor

No utilice relleno en el contenedor, use margen en el contenido. Que cuando no hay contenido, el contenedor permanece invisible.

Fuente

2015-04-07 08:40:40 vito78

No funciona, tengo un color de fondo que aún se muestra. –

Eliminar relleno para un elemento vacío

Respuesta

Cuestiones relacionadas