Display: inline-block extra margin

html

responsive-design

css-grid

lazy-loading

byNikita Barsukov·Aug 27, 2024

Here is a quick fix for the notorious inline-block vertical margins:

Zero font-size: Set font-size: 0 for parents and adjust for children.
Comment trick: Insert comments to cut spaces.
Tag-hugging: Craft HTML tags back-to-back.

Consider this code:

<!-- Squishing inline-blocks -->
<div class="inline-block">1st Block</div><!--
--><div class="inline-block">2nd Block</div><!--
--><div class="inline-block">3rd Block</div>

<style>
.inline-block {
    display: inline-block; /* Tightly packed */
}
</style>

Ensure font-sizes are correctly adjusted for children if you meddle with the parent font-size.

Gap vanish techniques

Fast answer might have given you temporary relief, but for more permanent measures:

Flex or Grid love

Switch display: inline-block to Flexbox or CSS Grid. These layouts offer better control:

.container {
    display: flex; /* You could try: display: grid; */
}
.item {
    /* Define your Flex / Grid styles */
}

Float it away

Applying float: left along with vertical-align can help iron out the undesired gaps:

.inline-block {
    float: left;
    vertical-align: bottom; /* Sets the baseline */
}

Negative margin technique

A negative margin can pull elements together:

.inline-block {
    margin-right: -4px; /* Adjust for best results */
}

Cross-browser anomalies

Different browsers have their distinct CSS quirks, so beware!

Validate browser compatibility

Verify property support on caniuse.com, especially for advanced features. Always remember, IE-9 might just be lurking around.

Vertical-align: Savior or Menace?

Using display: inline-block often means dealing with vertical-align. Try vertical-align: top for top-edge alignment or vertical-align: middle for central alignment.

Responsive design & contemporary practices

To fortify your layout strategy in this device-abundant world, include media queries and embrace responsive design.

Step up user experience

Through progressive enhancement, layout designs can evolve, starting from a basic form that's compatible with the oldest of browsers and upgrading iteratively for the latest gizmos.

Accessible and SEO friendly

Commit to accessibility. Good practices like legible text and sufficient contrast not only aid disabled users but also earn you SEO points.

Performance tweaks; Progressive loading

A potent antidote for choppy page loads — employ lazy loading for media files, particularly when your inline-block objects divulge heavy images.

Secure coding for safe surfing

Security is not a luxury, but a necessity in web design. From Content Security Policies (CSPs) to updating external libraries, every step counts.

Leveraging modern JavaScript

Employ newer JavaScript paradigms such ES6's let and const to jazz up your webpage functionality and interactivity.

CSS wizardry

Unleash your design capabilities with futuristic CSS features like custom properties (variables), blend modes, and clipping paths, while ensuring they align with your project's browser support commitments.

explain-codes / Html / Display: inline-block extra margin

Linked

Two inline-block, width 50% elements wrap to the second line



Ignore whitespace in HTML



Keep the middle item centered when side items have different widths



Css to line break before/after a particular `inline-block` item



Align DIV's to bottom or baseline

