CSS Tutorial

CSS Inline-block

Last modified on: October 21, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<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 <code>inline-block</code>: Combining Block and Inline Properties</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="5816e41b-effe-473e-abaa-cad4d9e2f9db" 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>The <code>inline-block</code> display value in CSS is a powerful tool that combines the layout properties of both <strong>block-level</strong> and <strong>inline</strong> elements. An element with <code>inline-block</code> behaves like an inline element, meaning it doesn&rsquo;t break onto a new line, but it can also have set dimensions like a block element, such as <code>width</code>, <code>height</code>, <code>margin</code>, and <code>padding</code>.</p>
<hr />
<h3>Syntax</h3>
<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>element {
    display: inline-block;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Features of <code>inline-block</code></h3>
<ol>
<li><strong>Inline behavior</strong>: Multiple <code>inline-block</code> elements can sit on the same line, one after another.</li>
<li><strong>Block properties</strong>: Unlike <code>inline</code> elements, <code>inline-block</code> elements can have their width, height, padding, and margin controlled.</li>
<li><strong>Flexible layout</strong>: Great for creating grid-like layouts or aligning elements horizontally without floating them.</li>
</ol>
<hr />
<h3>Example: Inline-block vs Block and Inline</h3>
<h4>HTML 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;Inline-Block Example&lt;/title&gt;
    &lt;style&gt;
        .block {
            display: block;
            width: 100px;
            height: 100px;
            background-color: #f8d7da;
            margin-bottom: 10px;
        }

.inline {
            display: inline;
            width: 100px; /* This has no effect on inline elements */
            height: 100px; /* This has no effect on inline elements */
            background-color: #d1ecf1;
            margin-right: 10px;
        }

.inline-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #c3e6cb;
            margin-right: 10px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h3&gt;Block Element (Breaks to New Line)&lt;/h3&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;

&lt;h3&gt;Inline Element (Ignores Width/Height)&lt;/h3&gt;
    &lt;span class="inline"&gt;&lt;/span&gt;
    &lt;span class="inline"&gt;&lt;/span&gt;

&lt;h3&gt;Inline-Block Element (Respects Dimensions)&lt;/h3&gt;
    &lt;div class="inline-block"&gt;&lt;/div&gt;
    &lt;div class="inline-block"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Explanation:</h4>
<ul>
<li><strong>Block</strong>: Block elements, like <code>&lt;div&gt;</code>, always start on a new line and take up the full width of their parent container.</li>
<li><strong>Inline</strong>: Inline elements, like <code>&lt;span&gt;</code>, flow with the text and cannot have their width and height adjusted.</li>
<li><strong>Inline-block</strong>: <code>inline-block</code> elements behave like inline elements (they flow with text and other elements), but their width, height, padding, and margin can be set like block elements.</li>
</ul>
<hr />
<h3>Why Use <code>inline-block</code>?</h3>
<p>The <code>inline-block</code> value is useful in situations where you need elements to line up horizontally but also want to control their dimensions. Common use cases include:</p>
<ul>
<li><strong>Navigation menus</strong>: You want the navigation links to sit side by side but still respect padding and margin.</li>
<li><strong>Buttons or icons</strong>: You want buttons or icons to line up in a row but retain control over their size.</li>
<li><strong>Grid layouts</strong>: Before the advent of CSS Grid and Flexbox, <code>inline-block</code> was a common technique for creating grid layouts where you could align items horizontally.</li>
</ul>
<hr />
<h3>Example: Creating a Navigation Menu with Inline-block</h3>
<h4>HTML 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;Inline-block Navigation&lt;/title&gt;
    &lt;style&gt;
        .nav {
            background-color: #343a40;
            padding: 10px;
        }

.nav-item {
            display: inline-block;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            background-color: #007bff;
            margin-right: 10px;
            border-radius: 5px;
        }

.nav-item:hover {
            background-color: #0056b3;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="nav"&gt;
        &lt;a href="#" class="nav-item"&gt;Home&lt;/a&gt;
        &lt;a href="#" class="nav-item"&gt;About&lt;/a&gt;
        &lt;a href="#" class="nav-item"&gt;Services&lt;/a&gt;
        &lt;a href="#" class="nav-item"&gt;Contact&lt;/a&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Explanation</h4>
<ul>
<li>Each navigation link is an inline-block element, so they sit side by side.</li>
<li>The links still respect the padding, margin, and background-color properties, giving them a button-like appearance.</li>
</ul>
<hr />
<h3>Spacing Issues with <code>inline-block</code></h3>
<p>One quirk of <code>inline-block</code> elements is that they respect whitespace between HTML tags, resulting in small gaps between elements. This is because they behave like inline elements, and inline elements treat spaces (including new lines in the HTML code) as actual characters.</p>
<h4>Example: Inline-block Spacing Issue</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;div class="inline-block"&gt;&lt;/div&gt; &lt;!-- Space between divs --&gt;
&lt;div class="inline-block"&gt;&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>This will create a small gap between the two divs. There are several ways to fix this:</p>
<ol>
<li>
<p><strong>Remove whitespace</strong> between the tags:</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;div class="inline-block"&gt;&lt;/div&gt;&lt;div class="inline-block"&gt;&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Use comment to hide the space</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">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;div class="inline-block"&gt;&lt;/div&gt;&lt;!--
--&gt;&lt;div class="inline-block"&gt;&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Set <code>font-size: 0;</code></strong> on the parent element to remove the space:</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>.parent {
    font-size: 0; /* Remove inline space */
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>Inline-block vs Flexbox and CSS Grid</h3>
<p>While <code>inline-block</code> is still useful in many situations, modern CSS layout systems like <strong>Flexbox</strong> and <strong>CSS Grid</strong> provide more powerful and flexible tools for aligning and distributing space among items.</p>
<h4>Example: Flexbox Alternative</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 {
    display: flex;
    justify-content: space-around; /* Aligns items horizontally */
}
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Flexbox</strong>: Offers greater control over spacing and alignment without needing to worry about white space between elements.</li>
<li><strong>CSS Grid</strong>: Offers even more flexibility for complex, multi-dimensional layouts.</li>
</ul>
<hr />
<h3>Conclusion</h3>
<p>The <code>inline-block</code> value is a versatile and useful display property that combines the flow of inline elements with the dimensional control of block elements. It&rsquo;s particularly helpful for creating simple horizontal layouts, like navigation menus or button groups. However, for more complex layouts, modern CSS solutions like <strong>Flexbox</strong> and <strong>Grid</strong> are often preferable.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More