link - title html español
La columna CSS3 de Webkit agrega un relleno adicional a su contenedor. (9)
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.
¡Es solo espacio en blanco!
section {font-size:0}
article {font-size: 1rem} /* if necessery */
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
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;
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
Prueba este CSS
#featured
{
overflow:hidden;
}
Si entiendo bien la pregunta, puedes intentar agregar el padding:0 o incluso algo como el padding:-10px; o similar al contenedor
Si estoy entendiendo la pregunta correctamente, intente ...
#featured{
padding: 20px 20px 0 20px;
...
}
y
#article{
display: inline-block;
...
}
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;
}
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
...}