Bug 41796 - Right margin or padding of multicolumn text does not appear when it overflow in the x-direction
: Right margin or padding of multicolumn text does not appear when it overflow ...
Status: ASSIGNED
: WebKit
CSS
: 528+ (Nightly build)
: PC Windows 7
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-07-07 13:57 PST by
Modified: 2013-02-20 19:30 PST (History)


Attachments


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-07-07 13:57:58 PST
Here's some sample code that shows this:

<div class=row style="-webkit-column-count:2; -webkit-column-width:402px; height:200px; -webkit-column-gap:60px; margin:100px">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
------- Comment #1 From 2012-04-06 14:40:57 PST -------
This poorly described bug report could do with some clarification, so here goes...

I've experienced this problem, too.  When right padding is applied to an element containing columns, webkit adjusts the column distribution to "eat into" the padding.

The issue can be seen more clearly over at http://jsfiddle.net/XLPjV/—apologies for the markup, I had another issue using <span> instead of <a> so I reproduced the problem as it appeared in my live code.  You'll notice that the inner elements should have a gap of 6px (3px per left/right margin), but this isn't the case with the columns, despite having a gap of 0px.  Instead, the gap is increased.

Each container <div> is scrolled all the way to the right, and you'll notice that the <div> with columns has a smaller gap between the last element child and the right border, despite having the same padding value.

I hope that clears this report up a little to be more understandable.