White Space Troubling During use of Display Inline Elements

Many times, we face spacing problems during HTML development with display: inline-block.

So, we will try to resolve this problem with many ways.

Example:

HTML:

CSS:

So how we control the spacing between elements.
whitespace-screen1

whitespace-screen2

Below are the mentioned solutions for this problem.

Solution 1: Apply font-size: 0px to the parent.

One of the most simple solutions for that is removing extra whitespace by applying font-size to 0 on the parent of inline-block elements.
By the applying font-size 0 to parent, need to mention child font-size different.

below are the example for that,

Solution 2: Minimize the HTML

Remove space between HTML elements by two method,

2.1. Drop Close Angle or Drop element Closing angle with the content

2.2. Make all Element in Single Row

Solution 3: HTML Comments or Avoid Closing Tag for that

3.1 Simply apply HTML Comments between elements, start of the comment with first element and half of the close comment with second element.

Or

3.2 Avoid closing tag of each element

but I think this one is not a good way with the w3c markup validation.

Solution 4: Oppose Margin with the elements

First, remove display inline-block and another but undesirable solutions for that is to apply margin-left in negative value like margin-left value is -4px.

Solution 5: Applying Flex

In case of acceptable browser support Use Flex Box for that, it is the best way to adjust this kind of spacing issue. Just apply display flex to parent, no need to apply anything to the child.

Below are the examples for that,

Solution 6: Applying Float

In place of display: inline-block; try to apply float between elements so this is a good way to adjust elements’ margin and padding.

mm

Yamik Suthar Web and Graphic Design Head

I'm a Creative Designer at Yudiz Solutions Pvt. Ltd. As a role of designer, I always try to express creativity in a way to convey all and help out others. My attachment with designing and photography is a combination of inventiveness. I always enjoy designing and Love photography.

Comments are closed.

Top