CSS Tutorial

CSS Box Model

Last modified on: October 20, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">CSS Box Model: Understanding Element Layout</h2>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="2a857fea-a9bd-45f6-ab43-e10a69b75d62" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>The CSS box model is a fundamental concept in web design that describes the rectangular boxes generated for elements in the document tree. Understanding the box model is essential for controlling the layout, spacing, and overall design of web pages.</p>
<hr />
<h3>Components of the Box Model</h3>
<p>Each box in the box model consists of four distinct areas:</p>
<ol>
<li>
<p><strong>Content</strong>: The innermost area where text, images, or other content is displayed. The dimensions of this area can be controlled using the <code>width</code> and <code>height</code> properties.</p>
</li>
<li>
<p><strong>Padding</strong>: The space between the content and the border. Padding adds space inside the element, surrounding the content. You can control padding with the <code>padding</code> property.</p>
</li>
<li>
<p><strong>Border</strong>: The outline that surrounds the padding (if any) and content. Borders can be styled with various widths, colors, and styles using the <code>border</code> property.</p>
</li>
<li>
<p><strong>Margin</strong>: The outermost area that creates space between the element and its neighbors. Margins add space outside the element and can be controlled with the <code>margin</code> property.</p>
</li>
</ol>
<hr />
<h3>Box Model Visualization</h3>
<p>Here&rsquo;s a visual representation of the box model:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>+---------------------------+
|          Margin           |  &lt;-- Margin (space outside the element)
|  +---------------------+  |
|  |       Border        |  |  &lt;-- Border (surrounds padding and content)
|  |  +--------------+   |  |
|  |  |   Padding    |   |  |  &lt;-- Padding (space inside the element)
|  |  | +----------+ |   |  |
|  |  | | Content  | |   |  |  &lt;-- Content (text, images, etc.)
|  |  | +----------+ |   |  |
|  |  +--------------+   |  |
|  +---------------------+  |
+---------------------------+
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>CSS Properties Related to the Box Model</h3>
<h4>1. <strong>Width and Height</strong></h4>
<p>The <code>width</code> and <code>height</code> properties define the size of the content area.</p>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>div {
  width: 300px;  /* Width of the content area */
  height: 150px; /* Height of the content area */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. <strong>Padding</strong></h4>
<p>The <code>padding</code> property controls the space between the content and the border.</p>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>div {
  padding: 20px; /* Space inside the element */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. <strong>Border</strong></h4>
<p>The <code>border</code> property defines the border around the padding and content.</p>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>div {
  border: 2px solid black; /* Solid black border */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. <strong>Margin</strong></h4>
<p>The <code>margin</code> property creates space outside the element.</p>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>div {
  margin: 10px; /* Space outside the element */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Box-Sizing Property</h3>
<p>The <code>box-sizing</code> property allows you to control how the width and height of an element are calculated, specifically whether to include padding and borders in those dimensions.</p>
<h4>Two Values for Box-Sizing:</h4>
<ol>
<li>
<p><strong><code>content-box</code> (default)</strong>: The width and height only include the content. Padding and border are added to the total size.</p>
</li>
<li>
<p><strong><code>border-box</code></strong>: The width and height include content, padding, and border. This setting makes layout calculations easier.</p>
</li>
</ol>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>* {
  box-sizing: border-box; /* Includes padding and border in width and height */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Example: Applying the Box Model</h3>
<h4>Example:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Box Model Example&lt;/title&gt;
    &lt;style&gt;
        * {
            box-sizing: border-box; /* Set box-sizing to border-box */
        }
        .container {
            width: 80%;
            margin: 20px auto; /* Center the container */
            padding: 20px; /* Padding around the container */
            background-color: lightgray; /* Background color for the container */
        }
        .box {
            width: 100%; /* Full width of the container */
            height: 100px; /* Fixed height */
            padding: 15px; /* Padding inside each box */
            border: 2px solid darkblue; /* Border for each box */
            margin-bottom: 10px; /* Margin below each box */
            background-color: lightcoral; /* Background color for the box */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="box"&gt;Box 1&lt;/div&gt;
        &lt;div class="box"&gt;Box 2&lt;/div&gt;
        &lt;div class="box"&gt;Box 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li>The <code>.container</code> is centered with a width of <code>80%</code> and includes padding and margins.</li>
<li>Each <code>.box</code> has <code>100%</code> width of the container, <code>100px</code> height, <code>15px</code> padding, <code>2px</code> solid border, and a margin below for spacing.</li>
</ul>
<hr />
<h3>Conclusion</h3>
<p>The CSS box model is a critical concept for web designers, allowing for precise control over the layout and spacing of elements on a page. Understanding how to manipulate content, padding, border, and margin is essential for effective web design.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More

CSS Box Model

Learn Ansible

Learn HTML

Learn Angular 3

Learn PHP

Learn Angular 2.0

Learn Python

Learn C# Sharp

Learn CSS

Learn Node Js

Learn JQuery Framework

Learn SQL Tutorial

Learn MySql

Learn PHP 7.1

Learn Angular 3

Learn Angular 2

Learn HTML5

Learn Angular 2

Learn Angular 3.0

Learn Bootstrap 3

Learn Bootstrap 4

Learn Bootstrap 5

Learn JQuery Tutorials