The latest articles on DEV Community by Martin Hofmann (@martskin). https://dev.to/martskin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F260698%2Feab8a0d7-ec06-4727-9400-8be52d20ba3c.jpeg https://dev.to/martskin en Martin Hofmann Tue, 29 Oct 2019 17:45:05 +0000 https://dev.to/martskin/css-box-model-visualizer-37ji https://dev.to/martskin/css-box-model-visualizer-37ji <p>Have you ever attempted to explain the CSS box-model or convey the padding and margin of a component using ASCII?</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> border _____________ | padding | | ___________ | | | | | | | element | | | | | | | ___________ | | margin | |_____________| </code></pre> </div> <p>Recently after a slack chat with a colleague I decided to build an online tool to help with the visualization!</p> <h2> Introducing the CSS Box-model Visualizer! </h2> <p>A quick, easy tool to visualize and share CSS box-model examples. </p> <ul> <li>Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors.</li> <li>Click the "Copy Link" button to get a sharable URL.</li> <li>Click the "Download PNG" button to generate an image.</li> <li>Click the "Copy CSS" button as a starting point for your component.</li> </ul> <p><a href="https://box-model-visualizer.netlify.com" rel="noopener noreferrer"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fyxn2k8c983elrtmkppiy.gif" alt="Box-Model card example animation"></a></p> <p><a href="https://box-model-visualizer.netlify.com" rel="noopener noreferrer">https://box-model-visualizer.netlify.com</a></p> <p>It's still a work in progress so please let me know if you find it useful or have any suggestions to help improve it!</p> css html react design