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

Re: Basic math operations

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 25 Oct 2010 15:39:54 -0700
Message-ID: <AANLkTi=FcNec1NjC8BTtv5RhBL7xDVeuvhh=dyAkPHkz@mail.gmail.com>
To: Jonas Hartmann <j0n4s.h4rtm4nn@googlemail.com>
Cc: www-style@w3.org
On Mon, Oct 25, 2010 at 7:42 AM, Jonas Hartmann
<j0n4s.h4rtm4nn@googlemail.com> wrote:
> Hello,
>
> I wanted to ask on the state of discussion on CSS and basic math operations (addition, subtraction, division, multiplication,...)
>
> Primary use case would be position or box model calculations like width:100%-2em-1pt; padding: 1em; border: 1px solid blue;

Basic math can be done using the calc() function, defined in CSS3
Values & Units <http://dev.w3.org/csswg/css3-values/#the-calc-min-and-max-functions>.
 It's designed precisely for cases like you describe:

foo {
  width: calc(100% - 2em - 2px);
  padding: 1em;
  border: 1px solid blue;
}

Note, though, that your particular case can be done more easily with
the 'box-sizing' property.  'box-sizing' changes which box the 'width'
and 'height' properties control.  By default it's the content box, but
it can be set to padding-box or border-box as well:

foo {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  border: 1px solid blue;
}


~TJ
Received on Monday, 25 October 2010 22:40:51 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:33 GMT