link - title html español

La columna CSS3 de Webkit agrega un relleno adicional a su contenedor.

Question

He creado un diseño de múltiples columnas CSS3 para la galería de imágenes que se ve bien en Firefox.

HTML:

<section id="featured">
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>

css:

#featured {
    width: 730px;
    padding: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 10px;
    column-fill: balance;
    background: #7d90a5;
}

article {
    width: 300px;
    display: block;
    background: #344252;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    width: 335px;
    margin-bottom: 20px;
}

article img{
    width: 335px;
    display: block;
}

El problema es que cuando uso el navegador Chrome para abrirlo, se agrega espacio adicional en la parte inferior de la <section> que no tengo idea de solucionarlo. Busqué en la web y encontré este thread pero no estoy seguro de que sea el mismo problema.

Compruebe este enlace de fiddle e intente abrirlo con Chrome y Firefox.

Answer 1

¡Es solo espacio en blanco!

section {font-size:0}
article {font-size: 1rem} /* if necessery */

Answer 2

Alternativa al uso de {display: inline-block}

article {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

Fuente: Tema similar , trucos CSS

Answer 3

Hiciste padding: 10px; Eso también agrega relleno al fondo. Use esto para quitar el relleno en la parte inferior:

padding: 10px 10px 0px 10px;

Answer 4

No usar con una propiedad column-break-inside: avoid; cualquier margin o padding , border justo margin-bottom , creo que esta es la mejor solución para este problema. http://jsfiddle.net/SdtP5/3

Answer 5

Prueba este CSS

#featured 
{
    overflow:hidden;        
}

Answer 6

Si entiendo bien la pregunta, puedes intentar agregar el padding:0 o incluso algo como el padding:-10px; o similar al contenedor

Answer 7

Si estoy entendiendo la pregunta correctamente, intente ...

#featured{
   padding: 20px 20px 0 20px;
   ...
}

y

#article{
   display: inline-block;
   ...
}

Answer 8

Una solución rápida, dirigida solo a los navegadores webkit.

#featured {
    -webkit-margin-after: -110px;
}

Además, al usar columnas, encuentro que mostrar los elementos en el interior como bloques en línea ayuda a evitar que se separen (en su caso)

article {
     display: inline-block;
}

Answer 9

Utiliza el margen inferior en cada artículo 20px, y rellena el contenedor en 20px para,

Ver este fiddle

#featured {
   padding: 20px 20px 0 20px
 ...}