• Given this HTML & CSS:
CSS CODE 
span 
{ 
    display:inline-block;
    width:100px;
}
<p>
    <span> wiki </span>
    <span> techy </span>
</p>
[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:
CSS CODE 
<p>
    <span> wiki </span><span> techy </span>
</p
  • In JavaScript – by removing the Text nodes from the container element (the paragraph), will be shown like this:
JAVASCRIPT CODE 
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

  • Add comments between elements NOT to have a white space.
HTML CODE 
<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

  • Use flexbox :
CSS CODE 
ul 
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

  • Add display: flex; to the parent element.
CSS CODE 
p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span 
{
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> wiki </span>
  <span> techy </span></p>
[ad type=”banner”]

simple:

CSS CODE 
item 
{
  display: inline-block;
  margin-right: -0.25em;
}
  • 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

  • This is one of the solution :
CSS CODE 
p 
{
  display: flex;
}
span 
{
  float: left;
  display: inline-block;
  width: 100px;
  background: green;
  font-size: 30px;
  color: orange;
}
<p>
  <span>hi wikitechy </span>
  <span> hello wikitechy</span>
</p>

  • If you want to make two pinkspan without a gap or other white-space, but if you want to remove the gap,
CSS CODE 
span 
{ 
    display:inline-block;
    width:100px;
    background:pink;
    font-size:30px;
    color:white; 
    text-align:center;

    float:left;
}

  • Can try the flexbox and apply the code below and the space will be removed.
CSS CODE 
p 
{
   display: flex;
   flex-direction: row;
}

HTML CODE 
<ul class="items">
   <li>Item 1</li><?php
 ?><li>Item 2</li><?php
 ?><li>Item 3</li>
</ul>
[ad type=”banner”]

CSS solution :

CSS CODE 
span 
{
    display: table-cell;
}

Add  white-space: nowrap to the container element ;

css :

CSS CODE 
     * 
{
          box-sizing: border-box;      
}
     .row 
{ 
           vertical-align: top;
          white-space: nowrap;       
 }
     .column
{ 
           float:left ; 
           display:inline-block ; 
           width:50% // or whatever in your case     
 }

Html :

HTML CODE 
<div class="row">
    <div class="column"> Hello Wikitechy</div>
    <div class="column">Wikitechy technology forum</div>
</div>

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

Negative margin

CSS CODE 
div a 
{ 
display: inline - block; margin - right: -4 px; 
}

font size to zero

css code 
nav 
{
 font - size: 0; 
}
 nav a 
{
 font - size: 16 px; 
}

Skip the closing tag

HTML code 
< ul > < li > one < li > two < li > three < /ul>

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , ,