PROBLEM:
[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:
[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”/]