How to remove adjacent two display: inline

65 4

Html is as follows:

<p>
 <span>hello</span>
 <span>world</span>
</p>

Css code:

span { 
 display:inline-block;
 width:100px;
 background:#36c;
 color:#fff;
 font-size:30px;
 text-align:center;
}

On the page, there's a space gap between them, and I know that just removing the space between them shows normal:

<p>
 <span>hello</span><span>world</span>
</p>

But I want to know how to solve the problem by modifying css without having to modify the html, without using js.

2 Answers

89 2

This reason is related to the type and size of the font.
Yahoo yui solution is to change letter-spacing and word-spacing to a negative value to solve ( different font values ), and ytzong gives a solution, written directly to -.5 em or larger http://www. 99css. com/archives/690.

.span {
 letter-spacing: -.5em;/* webkit: collapse white-space between units */
 *letter-spacing: normal;/* reset IE <8 */
 word-spacing: -.5em;/* IE <8 && gecko: collapse white-space between units */
}

I prefer to change the size of the pare not element by modifying the size of the pare not element:

p {
 font-size: 0;
}
...