W3C home > Mailing lists > Public > www-style@w3.org > June 2015

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

From: Garrett Smith <dhtmlkitchen@gmail.com>
Date: Thu, 25 Jun 2015 13:56:48 -0700
Message-ID: <CABZUbM0M29ggK=5m8=Hk1aUHQCYGU3wKaYq0S66ksXMcyYffoQ@mail.gmail.com>
To: Patrick Dark <www-style.at.w3.org@patrick.dark.name>
Cc: Florian Rivoal <florian@rivoal.net>, "Brad Kemper <brad.kemper@gmail.com>, www-style@w3.org" <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:55 UTC