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

On 6/22/2015 2:40 PM, Jonathan Kingston wrote:
> I can think of a few use-cases for border-box mostly that could be solved with calc however as mentioned removes meaning.

There are no semantics tied to CSS property values (e.g., padding-box). If one needs meaning for style sheet authors, one can use CSS variables as I demonstrated at the end of a response to Florian on this topic: https://lists.w3.org/Archives/Public/www-style/2015Jun/0133.html.

On 6/22/2015 2:40 PM, Jonathan Kingston wrote:
> However could I ask if there was a reason margin-box was never considered? The use case would be brilliant for structure where by adding margin could control the layout and spacing of boxes.

There are already at least two ways to do this: calc() values and flexible box layout. See the following examples (also provided as an attachment for quick viewing):

<!doctype html>
<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>HTML Demo</title>
         <style>
             * {
                 margin: 0; /* fallback */
                 margin: initial;
                 padding: 0; /* fallback */
                 padding: initial;
             }
             li {
                 background-color: currentcolor;
             }
             /* *[class~="box-sizing:.margin-box"], */
             *[class~="calc().value"],
             *[class~="calc().value.with.variables"] {
                 overflow: auto;
             }
             /* Hypothetical margin-box Code:
             *[class~="box-sizing:.margin-box"] li {
                 box-sizing: margin-box;
                 float: left;
                 margin: 1rem 2rem;
                 width: 33.333%;
             } */
             *[class~="calc().value"] li {
                 float: left;
                 margin: 1rem 2rem;
                 width: calc(33.333% - 2rem * 2);
             }
             *[class~="calc().value.with.variables"] li {
                 /* Currently, CSS variables are only supported in Firefox. */
                 --margin-width: 2rem;
                 float: left;
                 margin: 1rem var(--margin-width);
                 width: calc(33.333% - var(--margin-width) * 2);
             }
             *[class~="flexible.box.layout"] {
                 display: flex;
             }
             *[class~="flexible.box.layout"] li {
                 flex-grow: 1;
                 justify-content: space-around;
                 margin: 1rem 2rem;
             }
         </style>
     </head>
     <body>
         <!-- <ul class="box-sizing:.margin-box">
             <li>List Item</li>
             <li>List Item</li>
             <li>List Item</li>
         </ul> -->
         <ul class="calc().value">
             <li>List Item</li>
             <li>List Item</li>
             <li>List Item</li>
         </ul>
         <ul class="calc().value.with.variables">
             <li>List Item</li>
             <li>List Item</li>
             <li>List Item</li>
         </ul>
         <ul class="flexible.box.layout">
             <li>List Item</li>
             <li>List Item</li>
             <li>List Item</li>
         </ul>
     </body>
</html>

Attachments

Received on Friday, 26 June 2015 05:28:49 UTC