<main>
<div class="wrapper">
<article class="flow">
<h1>Box sizing effects on the box model</h1>
<div>
<label class="toggle" for="size-switcher">
<span class="toggle__label">Turn on <code>box-sizing: border-box</code></span>
<input type="checkbox" role="switch" class="toggle__element" id="size-switcher" />
<div class="toggle__decor" aria-hidden="true">
<div class="toggle__thumb"></div>
</div>
</label>
</div>
<figure>
<svg viewBox="0 0 760 520" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="An interactive diagram of the box model that updates based on box-sizing" class="box-model">
<path class="box-model__margin-box" d="M20.5 17.5h719v485h-719z" />
<path class="box-model__border-box" d="M59 56h642v408H59z" />
<path class="box-model__padding-box" d="M88 85h584v350H88z" />
<path class="box-model__content-box" d="M127.5 124.5h504v271h-504z" />
<path d="M341.286 261.737c-.099 1.377-.609 2.461-1.529 3.252-.914.791-2.121 1.187-3.621 1.187-1.641 0-2.933-.551-3.876-1.653-.938-1.107-1.406-2.625-1.406-4.552v-.783c0-1.23.216-2.314.65-3.251.434-.938 1.052-1.656 1.854-2.154.809-.504 1.746-.756 2.813-.756 1.476 0 2.666.396 3.568 1.187.903.791 1.424 1.901 1.565 3.331h-2.637c-.064-.826-.296-1.424-.694-1.793-.393-.375-.994-.563-1.802-.563-.879 0-1.538.317-1.978.95-.433.627-.656 1.602-.668 2.926v.967c0 1.383.208 2.394.624 3.032.422.639 1.084.958 1.987.958.814 0 1.421-.184 1.819-.553.404-.375.636-.952.694-1.732h2.637zm1.469-.58c0-.943.182-1.784.545-2.522a3.994 3.994 0 011.564-1.714c.686-.404 1.48-.607 2.382-.607 1.283 0 2.329.393 3.138 1.178.814.785 1.269 1.852 1.362 3.199l.018.651c0 1.459-.407 2.631-1.222 3.515-.814.879-1.907 1.319-3.278 1.319s-2.467-.44-3.287-1.319c-.815-.878-1.222-2.074-1.222-3.586v-.114zm2.54.185c0 .902.17 1.594.51 2.074.34.475.826.712 1.459.712.615 0 1.096-.234 1.441-.703.346-.475.519-1.231.519-2.268 0-.885-.173-1.57-.519-2.056-.345-.487-.832-.73-1.459-.73-.621 0-1.101.243-1.441.73-.34.48-.51 1.227-.51 2.241zm10.671-4.852l.079 1.099c.68-.85 1.591-1.275 2.734-1.275 1.008 0 1.758.296 2.25.888.492.592.744 1.477.756 2.654V266h-2.54v-6.082c0-.539-.118-.929-.352-1.169-.234-.246-.624-.369-1.169-.369-.715 0-1.251.305-1.608.914V266h-2.54v-9.51h2.39zm11.093-2.338v2.338h1.626v1.864h-1.626v4.746c0 .351.068.603.202.755.135.153.393.229.774.229.281 0 .53-.021.747-.062v1.925a5.209 5.209 0 01-1.538.229c-1.781 0-2.69-.9-2.725-2.698v-5.124h-1.389v-1.864h1.389v-2.338h2.54zm7.718 12.024c-1.394 0-2.531-.428-3.41-1.283-.873-.856-1.31-1.996-1.31-3.419v-.246c0-.956.185-1.808.554-2.558.369-.756.891-1.336 1.565-1.74.679-.41 1.453-.616 2.32-.616 1.301 0 2.323.411 3.067 1.231.75.82 1.125 1.983 1.125 3.489v1.037h-6.055c.082.621.328 1.119.738 1.494.416.375.94.563 1.573.563.979 0 1.743-.355 2.294-1.064l1.248 1.398c-.381.539-.896.961-1.547 1.266-.65.298-1.371.448-2.162.448zm-.29-7.805c-.504 0-.914.17-1.23.51-.311.34-.51.826-.598 1.459h3.533v-.202c-.012-.563-.164-.996-.457-1.301-.293-.311-.709-.466-1.248-.466zm8.289-1.881l.079 1.099c.68-.85 1.591-1.275 2.734-1.275 1.008 0 1.758.296 2.25.888.492.592.744 1.477.756 2.654V266h-2.54v-6.082c0-.539-.117-.929-.352-1.169-.234-.246-.624-.369-1.169-.369-.715 0-1.251.305-1.608.914V266h-2.54v-9.51h2.39zm11.093-2.338v2.338h1.626v1.864h-1.626v4.746c0 .351.068.603.202.755.135.153.393.229.774.229.281 0 .53-.021.747-.062v1.925a5.209 5.209 0 01-1.538.229c-1.781 0-2.69-.9-2.725-2.698v-5.124h-1.388v-1.864h1.388v-2.338h2.54zm16.693 7.181c0 1.523-.325 2.713-.975 3.568-.651.85-1.559 1.275-2.725 1.275-1.031 0-1.855-.396-2.47-1.187l-.114 1.011h-2.285v-13.5h2.54v4.843c.586-.686 1.356-1.029 2.311-1.029 1.16 0 2.069.428 2.725 1.284.662.849.993 2.048.993 3.594v.141zm-2.54-.185c0-.96-.152-1.661-.457-2.1-.305-.445-.759-.668-1.362-.668-.809 0-1.365.331-1.67.993v3.753c.31.668.873 1.002 1.687 1.002.821 0 1.36-.404 1.618-1.213.123-.387.184-.976.184-1.767zm4.018.009c0-.943.181-1.784.545-2.522a3.994 3.994 0 011.564-1.714c.686-.404 1.48-.607 2.382-.607 1.283 0 2.329.393 3.138 1.178.814.785 1.268 1.852 1.362 3.199l.018.651c0 1.459-.408 2.631-1.222 3.515-.815.879-1.907 1.319-3.278 1.319s-2.467-.44-3.287-1.319c-.815-.878-1.222-2.074-1.222-3.586v-.114zm2.54.185c0 .902.17 1.594.51 2.074.339.475.826.712 1.459.712.615 0 1.095-.234 1.441-.703.346-.475.519-1.231.519-2.268 0-.885-.173-1.57-.519-2.056-.346-.487-.832-.73-1.459-.73-.621 0-1.102.243-1.441.73-.34.48-.51 1.227-.51 2.241zm11.761-2.013l1.599-2.839h2.716l-2.707 4.658 2.822 4.852h-2.725l-1.696-2.988-1.688 2.988h-2.733l2.821-4.852-2.698-4.658h2.724l1.565 2.839zM331.094 106.491V111h-2.637V98.203h4.992c.961 0 1.805.176 2.531.528.733.351 1.295.852 1.688 1.502.393.645.589 1.38.589 2.206 0 1.254-.431 2.245-1.292 2.971-.856.721-2.042 1.081-3.56 1.081h-2.311zm0-2.136h2.355c.697 0 1.228-.164 1.591-.492.369-.328.554-.797.554-1.406 0-.627-.185-1.134-.554-1.52-.369-.387-.879-.586-1.529-.598h-2.417v4.016zm14.52 6.645a2.812 2.812 0 01-.254-.853c-.616.686-1.415 1.029-2.4 1.029-.931 0-1.705-.27-2.32-.809-.61-.539-.914-1.219-.914-2.039 0-1.008.372-1.781 1.116-2.32.75-.539 1.831-.812 3.243-.818h1.169v-.544c0-.44-.114-.792-.343-1.055-.222-.264-.577-.396-1.063-.396-.428 0-.765.103-1.011.308-.24.205-.36.486-.36.844h-2.54c0-.551.17-1.061.509-1.53.34-.468.821-.835 1.442-1.098.621-.27 1.318-.405 2.092-.405 1.172 0 2.1.296 2.786.888.691.586 1.037 1.412 1.037 2.479v4.122c.006.902.132 1.585.378 2.048V111h-2.567zm-2.1-1.767c.375 0 .721-.082 1.037-.246.316-.17.551-.395.703-.676v-1.635h-.949c-1.272 0-1.948.439-2.03 1.318l-.009.15c0 .316.111.577.334.782.222.205.527.307.914.307zm6.145-3.058c0-1.483.331-2.663.993-3.542.668-.879 1.579-1.319 2.733-1.319.926 0 1.691.346 2.294 1.038V97.5h2.549V111h-2.294l-.123-1.011c-.633.791-1.447 1.187-2.443 1.187-1.12 0-2.019-.44-2.699-1.319-.673-.884-1.01-2.112-1.01-3.682zm2.54.184c0 .891.155 1.574.465 2.048.311.475.762.712 1.354.712.785 0 1.339-.331 1.661-.993v-3.753c-.316-.662-.864-.993-1.643-.993-1.225 0-1.837.993-1.837 2.979zm7.902-.184c0-1.483.331-2.663.993-3.542.668-.879 1.579-1.319 2.734-1.319.926 0 1.69.346 2.294 1.038V97.5h2.549V111h-2.294l-.123-1.011c-.633.791-1.448 1.187-2.444 1.187-1.119 0-2.018-.44-2.698-1.319-.674-.884-1.011-2.112-1.011-3.682zm2.54.184c0 .891.155 1.574.466 2.048.311.475.762.712 1.354.712.785 0 1.338-.331 1.661-.993v-3.753c-.317-.662-.865-.993-1.644-.993-1.224 0-1.837.993-1.837 2.979zM373.62 111h-2.549v-9.51h2.549V111zm-2.698-11.97c0-.382.126-.695.378-.941.257-.246.606-.37 1.046-.37.433 0 .779.124 1.037.37.257.246.386.56.386.94 0 .387-.131.703-.395.95-.258.246-.601.369-1.028.369-.428 0-.774-.123-1.038-.37-.257-.246-.386-.562-.386-.949zm7.436 2.46l.08 1.099c.679-.85 1.59-1.275 2.733-1.275 1.008 0 1.758.296 2.25.888.492.592.744 1.477.756 2.654V111h-2.54v-6.082c0-.539-.117-.929-.352-1.169-.234-.246-.624-.369-1.169-.369-.715 0-1.251.305-1.608.914V111h-2.54v-9.51h2.39zm7.683 4.685c0-1.459.346-2.634 1.037-3.525.698-.89 1.635-1.336 2.813-1.336 1.043 0 1.854.358 2.434 1.073l.106-.897h2.303v9.194c0 .832-.191 1.555-.572 2.17a3.613 3.613 0 01-1.591 1.407c-.685.322-1.488.483-2.408.483-.697 0-1.377-.14-2.039-.422-.662-.275-1.163-.633-1.503-1.072l1.125-1.547c.633.709 1.401 1.064 2.303 1.064.674 0 1.198-.182 1.573-.545.375-.358.563-.868.563-1.53v-.509c-.586.662-1.357.993-2.312.993-1.142 0-2.068-.446-2.777-1.336-.703-.897-1.055-2.083-1.055-3.56v-.105zm2.54.184c0 .862.173 1.538.519 2.031.346.486.82.729 1.424.729.773 0 1.327-.29 1.661-.87v-3.999c-.34-.58-.888-.87-1.644-.87a1.67 1.67 0 00-1.441.747c-.346.498-.519 1.242-.519 2.232zm21.764-.026c0 1.523-.325 2.713-.975 3.568-.651.85-1.559 1.275-2.725 1.275-1.031 0-1.854-.396-2.47-1.187l-.114 1.011h-2.285V97.5h2.54v4.843c.586-.686 1.356-1.029 2.312-1.029 1.16 0 2.068.428 2.724 1.284.662.849.993 2.048.993 3.594v.141zm-2.54-.185c0-.96-.152-1.661-.457-2.1-.304-.445-.759-.668-1.362-.668-.809 0-1.365.331-1.67.993v3.753c.311.668.873 1.002 1.688 1.002.82 0 1.359-.404 1.617-1.213.123-.387.184-.976.184-1.767zm4.018.009c0-.943.182-1.784.545-2.522a3.994 3.994 0 011.564-1.714c.686-.404 1.48-.607 2.382-.607 1.283 0 2.329.393 3.138 1.178.814.785 1.269 1.852 1.362 3.199l.018.651c0 1.459-.407 2.631-1.222 3.515-.814.879-1.907 1.319-3.278 1.319s-2.467-.44-3.287-1.319c-.815-.878-1.222-2.074-1.222-3.586v-.114zm2.54.185c0 .902.17 1.594.51 2.074.34.475.826.712 1.459.712.615 0 1.096-.234 1.441-.703.346-.475.519-1.231.519-2.268 0-.885-.173-1.57-.519-2.056-.345-.487-.832-.73-1.459-.73-.621 0-1.101.243-1.441.73-.34.48-.51 1.227-.51 2.241zm11.761-2.013l1.6-2.839h2.715l-2.707 4.658 2.822 4.852h-2.725l-1.696-2.988-1.688 2.988h-2.733l2.821-4.852-2.698-4.658h2.725l1.564 2.839z" class="box-model__change-text" />
<path d="M335.145 77V64.203h4.483c1.552 0 2.73.299 3.533.897.802.591 1.204 1.462 1.204 2.61 0 .627-.161 1.18-.484 1.661a2.8 2.8 0 01-1.344 1.046c.656.164 1.172.495 1.547.993.38.498.571 1.108.571 1.828 0 1.23-.393 2.162-1.178 2.795-.785.633-1.904.955-3.357.967h-4.975zm2.637-5.572v3.454h2.259c.621 0 1.104-.147 1.45-.44.351-.298.527-.709.527-1.23 0-1.172-.606-1.767-1.819-1.784h-2.417zm0-1.864h1.951c1.33-.023 1.995-.553 1.995-1.59 0-.58-.17-.996-.51-1.248-.334-.258-.864-.387-1.59-.387h-1.846v3.225zm8.597 2.593c0-.943.181-1.784.545-2.522a3.993 3.993 0 011.564-1.714c.686-.404 1.48-.607 2.382-.607 1.283 0 2.329.393 3.138 1.178.814.785 1.268 1.852 1.362 3.2l.018.65c0 1.459-.408 2.63-1.222 3.515-.815.88-1.907 1.319-3.278 1.319-1.372 0-2.467-.44-3.288-1.319-.814-.879-1.221-2.074-1.221-3.585v-.115zm2.54.185c0 .902.17 1.594.51 2.074.339.475.826.712 1.459.712.615 0 1.095-.234 1.441-.703.346-.475.518-1.23.518-2.268 0-.885-.172-1.57-.518-2.056-.346-.487-.832-.73-1.459-.73-.621 0-1.102.243-1.441.73-.34.48-.51 1.227-.51 2.24zm13.677-2.47a6.907 6.907 0 00-.914-.07c-.961 0-1.591.325-1.89.975V77h-2.54v-9.51h2.399l.071 1.134c.509-.873 1.216-1.31 2.118-1.31.281 0 .545.039.791.115l-.035 2.443zm.959 2.303c0-1.483.331-2.663.993-3.542.668-.88 1.579-1.319 2.733-1.319.926 0 1.691.346 2.294 1.038V63.5h2.549V77h-2.294l-.123-1.01c-.633.79-1.447 1.186-2.443 1.186-1.119 0-2.019-.44-2.698-1.319-.674-.884-1.011-2.112-1.011-3.682zm2.54.184c0 .891.155 1.574.466 2.048.31.475.761.712 1.353.712.785 0 1.339-.33 1.661-.993v-3.753c-.316-.662-.864-.993-1.643-.993-1.225 0-1.837.993-1.837 2.98zm12.675 4.817c-1.395 0-2.531-.428-3.41-1.283-.873-.856-1.31-1.996-1.31-3.42v-.245c0-.956.185-1.808.554-2.558.369-.756.891-1.336 1.564-1.74.68-.41 1.453-.616 2.321-.616 1.3 0 2.323.41 3.067 1.23.75.821 1.125 1.984 1.125 3.49v1.037h-6.056c.082.621.329 1.12.739 1.494.416.375.94.563 1.573.563.978 0 1.743-.355 2.294-1.064l1.248 1.398c-.381.539-.897.96-1.547 1.266-.65.298-1.371.448-2.162.448zm-.29-7.805c-.504 0-.914.17-1.231.51-.31.34-.509.826-.597 1.459h3.533v-.202c-.012-.563-.164-.996-.457-1.301-.293-.31-.709-.466-1.248-.466zm11.295.501a6.895 6.895 0 00-.914-.07c-.961 0-1.591.325-1.89.975V77h-2.54v-9.51h2.4l.07 1.134c.51-.873 1.216-1.31 2.118-1.31.281 0 .545.039.791.115l-.035 2.443zm14.882 2.461c0 1.523-.325 2.713-.975 3.568-.651.85-1.559 1.275-2.725 1.275-1.031 0-1.854-.396-2.47-1.187L398.373 77h-2.285V63.5h2.54v4.843c.586-.686 1.356-1.029 2.311-1.029 1.161 0 2.069.428 2.725 1.284.662.85.993 2.047.993 3.594v.141zm-2.54-.185c0-.96-.152-1.66-.457-2.1-.305-.445-.759-.668-1.362-.668-.809 0-1.365.33-1.67.993v3.753c.31.668.873 1.002 1.687 1.002.821 0 1.36-.404 1.618-1.213.123-.387.184-.976.184-1.767zm4.018.01c0-.944.182-1.785.545-2.523a3.999 3.999 0 011.564-1.714c.686-.404 1.48-.607 2.382-.607 1.283 0 2.329.393 3.138 1.178.814.785 1.268 1.852 1.362 3.2l.018.65c0 1.459-.407 2.63-1.222 3.515-.814.88-1.907 1.319-3.278 1.319s-2.467-.44-3.287-1.319c-.815-.879-1.222-2.074-1.222-3.585v-.115zm2.54.184c0 .902.17 1.594.51 2.074.34.475.826.712 1.459.712.615 0 1.095-.234 1.441-.703.346-.475.519-1.23.519-2.268 0-.885-.173-1.57-.519-2.056-.346-.487-.832-.73-1.459-.73-.621 0-1.101.243-1.441.73-.34.48-.51 1.227-.51 2.24zm11.761-2.013l1.6-2.839h2.715l-2.707 4.658L424.866 77h-2.725l-1.696-2.988L418.757 77h-2.733l2.821-4.852-2.698-4.658h2.724l1.565 2.84z" class="box-model__scale-text" fill="#fff" />
<path d="M336.869 30.203l3.287 9.281 3.269-9.28h3.463V43h-2.645v-3.498l.263-6.038L341.052 43h-1.81l-3.446-9.527.264 6.029V43h-2.637V30.203h3.446zM354.835 43a2.833 2.833 0 01-.255-.852c-.615.685-1.415 1.028-2.4 1.028-.931 0-1.705-.27-2.32-.809-.609-.539-.914-1.219-.914-2.039 0-1.008.372-1.781 1.116-2.32.75-.54 1.831-.812 3.243-.818h1.169v-.544c0-.44-.114-.791-.342-1.055-.223-.264-.578-.396-1.064-.396-.428 0-.764.103-1.011.308-.24.205-.36.486-.36.844h-2.54c0-.551.17-1.06.51-1.53.34-.468.82-.835 1.441-1.098.621-.27 1.319-.404 2.092-.404 1.172 0 2.101.295 2.786.887.692.586 1.037 1.412 1.037 2.479v4.122c.006.902.132 1.585.378 2.048V43h-2.566zm-2.101-1.767c.375 0 .721-.082 1.037-.246.317-.17.551-.395.703-.677v-1.634h-.949c-1.271 0-1.948.44-2.03 1.318l-.009.15c0 .316.111.577.334.782.223.205.527.307.914.307zm11.884-5.36a6.895 6.895 0 00-.914-.071c-.961 0-1.591.325-1.89.975V43h-2.54v-9.51h2.4l.07 1.134c.51-.873 1.216-1.31 2.118-1.31.282 0 .545.038.791.115l-.035 2.443zm.986 2.302c0-1.46.345-2.634 1.037-3.525.697-.89 1.635-1.335 2.812-1.335 1.043 0 1.855.357 2.435 1.072l.105-.897h2.303v9.194c0 .832-.19 1.555-.571 2.17a3.611 3.611 0 01-1.591 1.407c-.686.322-1.488.483-2.408.483-.697 0-1.377-.14-2.039-.422-.662-.275-1.163-.633-1.503-1.072l1.125-1.547c.633.71 1.4 1.064 2.303 1.064.673 0 1.198-.182 1.573-.545.375-.358.562-.867.562-1.53v-.51c-.586.663-1.356.994-2.311.994-1.143 0-2.069-.446-2.778-1.336-.703-.897-1.054-2.083-1.054-3.56v-.105zm2.54.184c0 .862.173 1.538.518 2.03.346.487.821.73 1.424.73.774 0 1.327-.29 1.661-.87V36.25c-.34-.58-.887-.87-1.643-.87-.61 0-1.09.249-1.442.747-.345.498-.518 1.242-.518 2.232zM379.237 43h-2.549v-9.51h2.549V43zm-2.699-11.97c0-.382.126-.695.378-.941.258-.246.607-.37 1.046-.37.434 0 .78.124 1.037.37.258.246.387.56.387.94 0 .387-.132.703-.395.95-.258.246-.601.369-1.029.369-.427 0-.773-.123-1.037-.37-.258-.246-.387-.562-.387-.949zm7.437 2.46l.079 1.099c.68-.85 1.591-1.274 2.734-1.274 1.008 0 1.758.295 2.25.887.492.592.744 1.477.756 2.654V43h-2.54v-6.082c0-.54-.118-.929-.352-1.169-.234-.246-.624-.37-1.169-.37-.715 0-1.251.306-1.608.915V43h-2.54v-9.51h2.39zm21.404 4.843c0 1.523-.325 2.713-.976 3.568-.65.85-1.558 1.275-2.724 1.275-1.032 0-1.855-.396-2.47-1.187L399.095 43h-2.285V29.5h2.54v4.843c.586-.686 1.356-1.029 2.311-1.029 1.16 0 2.068.428 2.725 1.284.662.85.993 2.047.993 3.594v.141zm-2.54-.185c0-.96-.152-1.66-.457-2.1-.305-.446-.759-.668-1.362-.668-.809 0-1.366.33-1.67.993v3.753c.31.668.873 1.002 1.687 1.002.82 0 1.359-.404 1.617-1.213.123-.387.185-.975.185-1.767zm4.018.01c0-.944.181-1.785.545-2.523a3.993 3.993 0 011.564-1.714c.686-.404 1.48-.606 2.382-.606 1.283 0 2.329.392 3.138 1.177.814.785 1.268 1.852 1.362 3.2l.017.65c0 1.459-.407 2.63-1.221 3.515-.815.88-1.907 1.319-3.279 1.319-1.371 0-2.466-.44-3.287-1.319-.814-.879-1.221-2.074-1.221-3.585v-.115zm2.54.184c0 .902.17 1.593.509 2.074.34.475.827.712 1.459.712.616 0 1.096-.234 1.442-.703.346-.475.518-1.23.518-2.268 0-.884-.172-1.57-.518-2.056-.346-.487-.832-.73-1.459-.73-.621 0-1.102.243-1.442.73-.339.48-.509 1.227-.509 2.24zm11.761-2.013l1.599-2.839h2.716l-2.707 4.658L425.587 43h-2.724l-1.697-2.988L419.479 43h-2.733l2.821-4.852-2.698-4.658h2.724l1.565 2.84z" class="box-model__text" />
</svg>
<figcaption class="callout">
<p>
As you toggle the <code>box-sizing</code> value, the computed dimensions of
the box model are affected. The default state combines content width,
padding and border. The <code>border-box</code> value
<em>pushes</em> these back into the box.
</p>
<p role="alert"></p>
</figcaption>
</figure>
</article>
</div>
</main>.box-model {
border: 1px solid var(--color-stroke);
width: 100%;
max-width: 640px;
transition: max-width 300ms cubic-bezier(0, 0.26, 0.13, 1.55) 200ms;
}
.box-model[data-size="border-box"] {
max-width: 600px;
}
.box-model > * {
transform-origin: center;
transition: fill 200ms ease;
}
.box-model__margin-box {
fill: var(--color-off-white);
stroke: var(--color-primary);
}
.box-model__text,
.box-model__change-text {
fill: var(--color-dark);
}
.box-model__border-box {
fill: var(--color-primary);
}
.box-model__padding-box {
fill: var(--color-primary-x-light);
}
.box-model__content-box {
fill: var(--color-light);
stroke: var(--color-primary);
}
.box-model[data-size="border-box"]
:is(.box-model__content-box, .box-model__padding-box) {
fill: var(--color-primary);
stroke: var(--color-primary-x-light);
}
.box-model[data-size="border-box"] .box-model__change-text {
fill: var(--color-light);
}
const alertBox = document.querySelector('[role="alert"]');
const diagram = document.querySelector("svg");
const sizeSwitch = document.querySelector("#size-switcher");
const messages = {
"content-box": `
<p>If the box is <code>600px</code> wide and we have a border width of <code>10px</code>, a margin of <code>20px</code>, and <code>10px</code> of padding, the total width of the box would be <code>640px</code>.</p>
`,
"border-box": `
<p>If the box is <code>600px</code> wide and we have a border width of <code>10px</code>, a margin of <code>20px</code>, and <code>10px</code> of padding, the total width of the box would be <code>600px</code>.</p>
`
};
const renderMessage = (key = "border-box") => {
alertBox.innerHTML = messages[key];
};
// Set sizing attribute based on switch
sizeSwitch.addEventListener("change", () => {
let sizing = sizeSwitch.checked ? "border-box" : "content-box";
diagram.setAttribute("data-size", sizing);
renderMessage(sizing);
});
renderMessage();
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.