Webkit CSS3 column adds an extra padding to its container.

问题

I've created a CSS3 multi column layout for image gallery which looks nice on 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;
}

The problem is, when I am using Chrome browser to open it up, it adds extra space at the bottom of the <section> which I have no idea to fix it. I've search the web and found this thread but I am not sure if it's the same issue.

Check this fiddle link and try open using both Chrome and Firefox.

回答1:

Try this CSS

#featured 
{
    overflow:hidden;        
}

回答2:

A quick fix, targeting only -webkit- browsers

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

Also, when using columns, I find that displaying the elements inside as inline-blocks, helps prevent them from breaking apart (in your case)

article {
     display: inline-block;
}

回答3:

You use margin-bottom in each article 20px, and padding the container in 20px to,

See this fiddle

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

回答4:

If I'm understanding the question correctly, try...

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

and

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

回答5:

Alternative to using { display: inline-block }

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

sourced from: Similar issue, CSS Tricks

回答6:

Don't use with a property column-break-inside: avoid; any margin or padding, border just margin-bottom, i think this best solution for this problem. http://jsfiddle.net/SdtP5/3

回答7:

If i'm understanding the question right, you might try adding padding:0 or even something such as padding:-10px; or similar to the containter

回答8:

You did padding: 10px; that also adds padding to the bottom. Use this to remove padding at bottom:

padding: 10px 10px 0px 10px;

回答9:

It is just white-space!

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

来源：https://stackoverflow.com/questions/17767824/webkit-css3-column-adds-an-extra-padding-to-its-container

标签

html

css

css3

webkit

multiple-columns