calc-rounding-001-ref.html (572B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <meta charset="utf-8"> 7 <title>CSS Test Reference</title> 8 <style> 9 body { 10 background: #f3f5f6; 11 } 12 13 div { 14 font-size: 15px; 15 --width: 401px; 16 width: var(--width); 17 margin: 20px; 18 background: #fff; 19 display: flex; 20 flex-wrap: wrap; 21 } 22 23 b { 24 height: 50px; 25 background: red; 26 width: calc((var(--width) - 4.5em) / 4); /* .5em gutters */ 27 } 28 29 b:not(:last-child) { 30 margin-right: 1.5em; 31 } 32 </style> 33 <div><b></b><b></b><b></b><b></b></div>