https://blog-dev.simpleenough.net/tags/box-model/Recent content in Box Model on Simple Enough BlogHugoenMon, 04 Aug 2025 16:09:45 +0200https://blog-dev.simpleenough.net/blog/boxmodel/Mon, 04 Aug 2025 16:09:45 +0200https://blog-dev.simpleenough.net/blog/boxmodel/<h2 id="i-what-is-the-css-box-model" class="heading">I. What is the CSS Box Model?<a href="#i-what-is-the-css-box-model" aria-labelledby="i-what-is-the-css-box-model"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h2> <p>In CSS, <strong>every HTML element is treated as a rectangular box</strong>. This is called the <strong>box model</strong>.</p> <p>The box model defines <strong>how an element&rsquo;s total size is calculated</strong>, and how it interacts with surrounding elements.</p> <p>An HTML element consists of <strong>4 main areas</strong>:</p> <div class="mb-3 syntax-highlight"><pre tabindex="0"><code>+-------------------------------+ | margin (outer) | | +-------------------------+ | | | border (border) | | | | +-------------------+ | | | | | padding (space) | | | | | | +---------------+ | | | | | | | content | | | | | | | +---------------+ | | | | | +-------------------+ | | | +-------------------------+ | +-------------------------------+</code></pre></div><hr> <h2 id="ii-the-4-parts-of-the-box-model" class="heading">II. The 4 Parts of the Box Model<a href="#ii-the-4-parts-of-the-box-model" aria-labelledby="ii-the-4-parts-of-the-box-model"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h2> <h3 id="1-content" class="heading">1. <code>content</code><a href="#1-content" aria-labelledby="1-content"> <!-- <i class="fas fa-link anchor"></i> --> <svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><use href="#fas-link"></use></svg>&nbsp; </a> </h3> <p>The <strong>actual content</strong> of the element (text, image, button…).</p>