CSS Tutorial

CSS Units

Last modified on: October 25, 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 Units: Measuring and Sizing Elements</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="6df5dee0-9325-496b-9fcf-4d92b371c0ec" data-message-model-slug="gpt-4o">
<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>CSS units are essential for defining element sizes, spacing, font sizes, and layout structure. CSS offers both absolute and relative units, each with specific uses based on design goals.</p>
<hr />
<h3>Types of CSS Units</h3>
<ol>
<li><strong>Absolute Units</strong>: Fixed values that don't scale relative to other elements.</li>
<li><strong>Relative Units</strong>: Scale according to the viewport size, parent element, or other related factors.</li>
</ol>
<hr />
<h3>1. Absolute Units</h3>
<p>Absolute units create fixed dimensions, ideal for print styles or when pixel-perfect precision is required.</p>
<table>
<thead>
<tr>
<th>Unit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>px</code></td>
<td>Pixels, standard unit in digital displays.</td>
</tr>
<tr>
<td><code>cm</code></td>
<td>Centimeters, used for physical measurements (e.g., print).</td>
</tr>
<tr>
<td><code>mm</code></td>
<td>Millimeters, used similarly to centimeters.</td>
</tr>
<tr>
<td><code>in</code></td>
<td>Inches, also for print or physical sizing.</td>
</tr>
<tr>
<td><code>pt</code></td>
<td>Points (1 pt = 1/72 inch), used often in typography.</td>
</tr>
<tr>
<td><code>pc</code></td>
<td>Picas (1 pc = 12 pt), less commonly used.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong>:</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="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 {
    width: 300px; /* Fixed width of 300 pixels */
    height: 100mm; /* Fixed height of 100 millimeters */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>2. Relative Units</h3>
<p>Relative units adjust dynamically, making layouts more responsive.</p>
<table>
<thead>
<tr>
<th>Unit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>%</code></td>
<td>Percentage relative to the parent element&rsquo;s dimensions.</td>
</tr>
<tr>
<td><code>em</code></td>
<td>Relative to the font size of the element&rsquo;s parent.</td>
</tr>
<tr>
<td><code>rem</code></td>
<td>Root em, relative to the root font size (typically <code>&lt;html&gt;</code>).</td>
</tr>
<tr>
<td><code>vw</code></td>
<td>Viewport width, 1vw = 1% of the viewport&rsquo;s width.</td>
</tr>
<tr>
<td><code>vh</code></td>
<td>Viewport height, 1vh = 1% of the viewport&rsquo;s height.</td>
</tr>
<tr>
<td><code>vmin</code>, <code>vmax</code></td>
<td>Relative to the smaller or larger of <code>vw</code> or <code>vh</code>.</td>
</tr>
<tr>
<td><code>ch</code></td>
<td>Relative to the width of the "0" character in the font.</td>
</tr>
<tr>
<td><code>ex</code></td>
<td>Relative to the height of the "x" character in the font.</td>
</tr>
</tbody>
</table>
<h4>Example: Responsive Layout with Relative Units</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>.container {
    width: 80vw; /* 80% of the viewport width */
    height: 50vh; /* 50% of the viewport height */
}

.text {
    font-size: 1.5rem; /* 1.5 times the root font size */
    margin-top: 5%; /* 5% of the parent&rsquo;s height */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Common Use Cases for CSS Units</h3>
<ol>
<li>
<p><strong>Layout Widths and Heights</strong>:</p>
<ul>
<li>Use <code>%</code>, <code>vw</code>, or <code>vh</code> for responsive layouts.</li>
<li>Use <code>px</code> or <code>cm</code> for fixed-size elements.</li>
</ul>
</li>
<li>
<p><strong>Font Sizes</strong>:</p>
<ul>
<li>Use <code>em</code> for relative sizing within components (e.g., buttons, menus).</li>
<li>Use <code>rem</code> for consistency across different elements.</li>
</ul>
</li>
<li>
<p><strong>Spacing (Margins and Padding)</strong>:</p>
<ul>
<li><code>%</code> and <code>vw</code>/<code>vh</code> can add responsive spacing.</li>
<li><code>px</code> can provide more precise control in smaller increments.</li>
</ul>
</li>
<li>
<p><strong>Borders and Shadows</strong>:</p>
<ul>
<li>Typically set in <code>px</code> for exact control.</li>
</ul>
</li>
</ol>
<hr />
<h3>Example: Responsive Page Layout</h3>
<p>This layout adjusts to different screen sizes by using viewport and relative units.</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="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;Responsive Layout with CSS Units&lt;/title&gt;
    &lt;style&gt;
        body {
            font-size: 16px;
            margin: 0;
        }

.header {
            height: 10vh; /* 10% of viewport height */
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.content {
            padding: 5%;
            font-size: 1rem; /* Relative to root font size */
            color: #333;
        }

.box {
            width: 50%;
            height: 200px;
            margin: 2em auto; /* Relative to font size */
            background-color: #007bff;
        }

.footer {
            height: 10vh;
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;header class="header"&gt;
        &lt;h1&gt;Responsive Layout with CSS Units&lt;/h1&gt;
    &lt;/header&gt;

&lt;section class="content"&gt;
        &lt;p&gt;This layout adjusts using viewport and relative units. Resize the window to see responsive behavior.&lt;/p&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
    &lt;/section&gt;

&lt;footer class="footer"&gt;
        &lt;p&gt;&amp;copy; 2024 My Responsive Website&lt;/p&gt;
    &lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More