## CSS calc()

CSS `calc()` function give a way to calculate values. See: calc() function on MDN

`width: calc(33% - 2rem);`

Example 5.2 - box sizing - Example 5.2<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul> ul, li { margin-left: 0; padding-left: 0;} ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;} li { box-sizing: border-box; padding: 1rem; margin: 1rem; float: left; width: calc(33% - 2rem); font-weight: bold; text-align: center; border: 5px dotted green; }

- Markup
- Style
- Screenshot

     <ul>
       <li>Item One
       </li>
       <li>Item Two
       </li>
       <li>Item Three
       </li> </ul>

In `style` element (`<style>`) within `head` element:

      ul, li { margin-left: 0; padding-left: 0;}
      ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;}
      li { box-sizing: border-box; padding: 1rem; margin: 1rem; float: left; width: calc(33% - 2rem);
        font-weight: bold; text-align: center; border: 5px dotted green; }