[Solved – 11 Answers] CSS – HTML -How to remove the space between inline-block elements

PROBLEM:

• Given this HTML & CSS:

[pastacode lang=”css” manual=”span%20%0A%7B%20%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20width%3A100px%3B%0A%7D%0A%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp%3E%0A” message=”CSS CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

as a result, there will be a 4px wide space between the SPAN elements.

• We could get rid of that space by removing the white-space between the SPAN elements in the HTML source code:

[pastacode lang=”css” manual=”%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp” message=”CSS CODE” highlight=”” provider=”manual”/]

• In JavaScript – by removing the Text nodes from the container element (the paragraph), will be shown like this:

[pastacode lang=”javascript” manual=”%2F%2F%20jQuery%0A%24(‘p’).contents().filter(function()%20%7B%20return%20this.nodeType%20%3D%3D%3D%203%3B%20%7D).remove()%3B%0A” message=”JAVASCRIPT CODE” highlight=”” provider=”manual”/]

SOLUTION 1:

• Add comments between elements NOT to have a white space.

[pastacode lang=”markup” manual=”%3Cdiv%3E%0A%20%20%20%20Element%201%0A%3C%2Fdiv%3E%3C!–%0A–%3E%3Cdiv%3E%0A%20%20%20%20Element%202%0A%3C%2Fdiv%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/]

SOLUTION 2:

• Use flexbox :

[pastacode lang=”css” manual=”ul%20%0A%7B%0A%20%20%20%20display%3A%20-webkit-box%3B%0A%20%20%20%20display%3A%20-moz-box%3B%0A%20%20%20%20display%3A%20-ms-flexbox%3B%0A%20%20%20%20display%3A%20-webkit-flex%3B%0A%20%20%20%20display%3A%20flex%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 3:

• Add display: flex; to the parent element.

[pastacode lang=”css” manual=”p%20%7B%0A%20%20display%3A%20-webkit-box%3B%0A%20%20display%3A%20-webkit-flex%3B%0A%20%20display%3A%20-ms-flexbox%3B%0A%20%20display%3A%20flex%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20float%3A%20left%3B%0A%20%20display%3A%20inline-block%3B%0A%20%20width%3A%20100px%3B%0A%20%20background%3A%20blue%3B%0A%20%20font-size%3A%2030px%3B%0A%20%20color%3A%20white%3B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%3Cp%3E%0A%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%0A%20%20%3Cspan%3E%20techy%20%3C%2Fspan%3E%3C%2Fp%3E%0A” message=”CSS CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 4:

simple:

[pastacode lang=”css” manual=”item%20%0A%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20margin-right%3A%20-0.25em%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

• no need to touch parent element.
• Only condition here: the item’s font-size must not be defined (must be equal to parent’s font-size).
• 0.25em is the default word-spacing

SOLUTION 5:

• This is one of the solution :

[pastacode lang=”css” manual=”p%20%0A%7B%0A%20%20display%3A%20flex%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20float%3A%20left%3B%0A%20%20display%3A%20inline-block%3B%0A%20%20width%3A%20100px%3B%0A%20%20background%3A%20green%3B%0A%20%20font-size%3A%2030px%3B%0A%20%20color%3A%20orange%3B%0A%7D%0A%3Cp%3E%0A%20%20%3Cspan%3Ehi%20wikitechy%20%3C%2Fspan%3E%0A%20%20%3Cspan%3E%20hello%20wikitechy%3C%2Fspan%3E%0A%3C%2Fp%3E%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 6:

• If you want to make two pinkspan without a gap or other white-space, but if you want to remove the gap,

[pastacode lang=”css” manual=”span%20%0A%7B%20%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20width%3A100px%3B%0A%20%20%20%20background%3Apink%3B%0A%20%20%20%20font-size%3A30px%3B%0A%20%20%20%20color%3Awhite%3B%20%0A%20%20%20%20text-align%3Acenter%3B%0A%0A%20%20%20%20float%3Aleft%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 7:

• Can try the flexbox and apply the code below and the space will be removed.

[pastacode lang=”css” manual=”p%20%0A%7B%0A%20%20%20display%3A%20flex%3B%0A%20%20%20flex-direction%3A%20row%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 8:

[pastacode lang=”markup” manual=”%3Cul%20class%3D%22items%22%3E%0A%20%20%20%3Cli%3EItem%201%3C%2Fli%3E%3C%3Fphp%0A%20%3F%3E%3Cli%3EItem%202%3C%2Fli%3E%3C%3Fphp%0A%20%3F%3E%3Cli%3EItem%203%3C%2Fli%3E%0A%3C%2Ful%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 9:

CSS solution :

[pastacode lang=”css” manual=”span%20%0A%7B%0A%20%20%20%20display%3A%20table-cell%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 10:

Add  white-space: nowrap to the container element ;

css :

[pastacode lang=”css” manual=”%20%20%20%20%20*%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%20%20%20%20%20%20%0A%7D%0A%20%20%20%20%20.row%20%0A%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20vertical-align%3A%20top%3B%0A%20%20%20%20%20%20%20%20%20%20white-space%3A%20nowrap%3B%20%20%20%20%20%20%20%0A%20%7D%0A%20%20%20%20%20.column%0A%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20float%3Aleft%20%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20display%3Ainline-block%20%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20width%3A50%25%20%2F%2F%20or%20whatever%20in%20your%20case%20%20%20%20%20%0A%20%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

Html :

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22column%22%3E%20Hello%20Wikitechy%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22column%22%3EWikitechy%20technology%20forum%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/]

SOLUTION 11:

• Remove the spaces from Inline Block Elements there are many method:

Negative margin

[pastacode lang=”css” manual=”div%20a%20%0A%7B%20%0Adisplay%3A%20inline%20-%20block%3B%20margin%20-%20right%3A%20-4%20px%3B%20%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

font size to zero

[pastacode lang=”css” manual=”nav%20%0A%7B%0A%20font%20-%20size%3A%200%3B%20%0A%7D%0A%20nav%20a%20%0A%7B%0A%20font%20-%20size%3A%2016%20px%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

Skip the closing tag

[pastacode lang=”markup” manual=”%3C%20ul%20%3E%20%3C%20li%20%3E%20one%20%3C%20li%20%3E%20two%20%3C%20li%20%3E%20three%20%3C%20%2Ful%3E%0A” message=”HTML code” highlight=”” provider=”manual”/]