W3C home > Mailing lists > Public > www-style@w3.org > October 2017

Re: [css-backgrounds] border-position

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 4 Oct 2017 13:13:19 -0700
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
Message-Id: <D870E4BA-FCCD-4F5D-8A75-28532A12C422@gmail.com>
To: Benjamin De Cock <ben@stripe.com>


> On Oct 3, 2017, at 3:42 AM, Benjamin De Cock <ben@stripe.com> wrote:
> 
>> On Thu, Sep 21, 2017 at 6:39 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
>> One of the key differences here is that the border in CSS takes
>> up space. It does this so that it doesn't overlap other content--
>> the browser can ensure enough space where needed, and the author
>> doesn't have to adjust margins/padding every time s/he adjusts
>> the border width. This is good behavior for a layout tool.
>> 
>> Illustrator and Sketch are drawing tools, so they would output
>> SVG shapes, not CSS boxes, in which case the 'stroke' property
>> is used, and that centers on the boundary as you expect.
>> 
>> Given that, I'm not really sure CSS needs a border-position.
>> Could be convinced otherwise, but it'd need more specific
>> examples of where it's needed. :)
>> 
>> ~fantasai
> 
> Thanks for clarifying! I guess I don't really have more specific examples, it really is just a nice thing to have in the authoring process. And as much as I conceive the theoretical difference between a drawing and a layout tool, the fact is that they're closely related in the way we build web interfaces.

Yeah, the border box is always going to be outside the padding box, and ¡®box-sizing¡¯ will combine with things like ¡®width¡¯ (or ¡®max-width¡¯, ¡®flex-basis¡¯, etc.) to determine the dimensions of the border box, which then leads to how much space is used for layout. 

However, it would be possible to have something like ¡®border-image-offset¡¯ to shift the ink of the line without changing layout. I could see ¡®border-offset¡¯ being similar to that, but shifting the border ink (as determined by border-style and border-width) instead of an image. Because it could cause overlapping with existing content, you¡¯d have to be careful with margin and padding, and it probably wouldn¡¯t be your default way of designing layouts. But I could see that being very useful if we ever get a feature for doing multiple, overlapping borders. 
Received on Wednesday, 4 October 2017 20:13:43 UTC

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