Reprint >> Removal of inline-block element spacing between the N method of "heavy"

I. Description of the phenomenon

The true meaning of the inline-block level between the elements, the line-break display or space-delimited case there will be spacing, very simple example:

<input/> <input type= "Submit"/>

The spacing is coming ~ ~ (correct understanding: Inline,inlin-block;block)

We use CSS to change non-inline-block horizontal elements to inline-block levels, and there is the problem:

{    display: inline-block;     padding: . 5em 1em;     background-color: #cad5eb;} <div class= "Space" >    <a href= "# #" > Melancholy </a>    <a href= "# #" > Calm </a>    <a href= "# #" > Blood </a></div>

This performance is in accordance with the specifications of the expected performance (if some people think that the bug is too () ay () Oy).

However, this kind of spacing can sometimes have an impact on our layout, or the compatibility process, and we need to get rid of it. The following shows the N methods (Welcome supplement)!

Second, the method of removing space

The reason for the presence of white space between elements is the space between the tabs, so the space in the HTML is removed and the natural spacing is wood. Given the readability of the code, it is not advisable to make a single line, and we can:

<Divclass= "Space">    <ahref="##">Melancholy</a><ahref="##">Calm</a><ahref="##">Blood</a></Div>or is:<Divclass= "Space">    <ahref="##">Melancholy</a><ahref="##">Calm</a><ahref="##">Blood</a></Div>

V. Use of font-size:0

Code similar to the following:

{    font-size: 0;}  {    font-size: 12px;}

This approach basically solves the gap between Inline-block elements in most browsers (IE7 and other browsers can sometimes have a 1-pixel gap). However, there is a browser, chrome, which has the default minimum font size limit (although the browser has now removed this limitation)
Code similar to the following:

Vi. Use of letter-spacing

Code similar to the following:

{    letter-spacing: -3px;}  {    letter-spacing: 0;}

According to my test last year, this method can handle basically all browsers, including eating "East Shoe", "West Poison (capsule)", "South Land (Ditch oil)", "North Calcium (Sanlu)" Ie6/ie7 browser, but Opera browser has the problem of egg ache: Minimum spacing 1 pixels, then, letter-spacing The smaller will be restored.

Vii. Use of word-spacing

Similar to the following code:

{    word-spacing: -6px;}  {    word-spacing: 0;}

One is the character spacing ( letter-spacing ) One is the word spacing ( word-spacing ), which is very similar. As far as I am tested, word-spacing the negative value can be ignored as long as it is large to a certain extent. Because, it seems, word-spacing even if the negative value is large, there will be no overlap.

If you use a Chrome browser, you may see that the spacing is still there. It is true that there is a problem, I am not sure, but I know that you can add display: table; or display:inline-table; make chrome a clever one.

{    display: inline-table;     word-spacing: -6px;}

Viii. other methods of finished products

The following shows the Yui 3 CSS Grids using letter-spacing and word-spacing removing the grid cells see the interval method (note that it is for block level elements, so the ie8-browser does hack processing):

. Yui3-g{letter-spacing:-0.31em;/*WebKit*/*letter-spacing:Normal;/*IE < 8 reset, IE6, support attributes before plus (* or _) Other browsers that do not support this property are ignored. IE7 support attributes before adding (* or +)*/word-spacing:-0.43em;/*IE < 8 && Gecko,*/}. Yui3-u{Display:Inline-block;Zoom:1;*display:inline;/*IE < 8: Forged Inline-block because ie6,7 does not support display:inline-block,zoom:1 to make IE elements have their own layout haslayout=-1;
In this case, the Display:inline (Haslayout=-1) with its own layout is similar to the dispaly:inline-block of other browsers under ie6,7;
*/letter-spacing:Normal;word-spacing:Normal;vertical-align:Top;}

The following is a method provided by a person named Raym:

Li{Display:Inline-block;background:Orange;padding:10px;word-spacing:0; }ul{width:100%;Display:Table;/*Femdom WebKit*/word-spacing:-1em;}. Nav Li{*display:inline;}

Reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]

Reprint >> Removal of inline-block element spacing between the N method of "heavy"