Re: [css-ui-3] box-sizing: padding-box

On 6/13/15, Patrick Dark <www-style.at.w3.org@patrick.dark.name> wrote:
> On 6/12/2015 7:34 AM, Florian Rivoal wrote:
>>> There are times where borders could be decorative elements where it is
>>> more optimal for it to be excluded from the width. I’ve put together a
>>> small demo here. On hover, a border-right is appearing on the <div>s on
>>> the left side. If border-box had been used, the border would have become
>>> inside the element, shrinking the dark green width, but on Firefox it is
>>> rendering outside as intended. If I had been using content-box, I
>>> would’ve had to shrink the div widths as a hack instead of the more easy
>>> «width: 100%».
>>>
>>> http://jsbin.com/cepifuyuru/1/edit?html,css,output
>
> This use case can be accommodated by:
> (A) removing |box-sizing: padding-box| and |width: 100%| from the |div|
> element.
> (B) applying |width: calc(100% + 25px)| to the |div:hover|
> element/pseudo-class.
>

It can also be done using absolute positioning. I don't see people
doing that despite the advantages. When it's not advantageous; I
prefer padding box to calc because padding box works in IE8 and calc
does not.

> (|box-sizing: padding-box| isn't needed.)
>

No, but it can be handy at times as another way to do what you want.
-- 
Garrett
@xkit
ChordCycles.wordpress.com
garretts.github.io
personx.tumblr.com

Received on Thursday, 25 June 2015 20:57:18 UTC