N methods for removing the spacing between inline-block elements, inline-block spacing

N methods for removing the spacing between inline-block elements, inline-block spacing
1. symptom description

In the true sense, the horizontal inline-block elements are separated by line breaks or spaces. A very simple example is as follows:

<input /> <input type="submit" />

The spacing is coming ~~

This problem also occurs when we use CSS to change the horizontal element of a non-inline-block to the inline-block level:

.space a {    display: inline-block;    padding: .5em 1em;    background-color: #cad5eb;}

<Div class = "space"> <a href = "#"> melancholy </a> <a href = "#"> calm </a> <a href = "##"> hot blood </a> </div>

Click here: inline-block spacing demo

This is the expected performance that complies with the specifications (if someone thinks it is a bug, it is too much () ay () oy ).

However, such spacing sometimes affects our layout or compatibility. What should we do if we need to remove it? The following describes N methods (please add one )!

2. Remove spaces in the Method

The reason for the white margin between elements is the space between the tag segments. Therefore, remove the space in HTML and the natural margin will be available. Considering the readability of the Code, it is obvious that writing a line is not advisable. We can:

<Div class = "space"> <a href = "#"> melancholy </a> <a href = "#"> calm </a> <a href = "##"> hot blood </a> </div>

Or:

<Div class = "space"> <a href = "#"> melancholy </a> <a href = "#"> calm </a> <a href = "##"> hot blood </a> </div>

Or use HTML Annotations:

<Div class = "space"> <a href = "##"> melancholy </a> <! --> <A href = "#"> calm </a> <! --> <A href = "#"> hot blood </a> </div>

.

Iii. Use a negative value of margin

.space a {    display: inline-block;    margin-right: -3px;}

The size of the negative value of margin is related to the font and text size of the context. For details about the size value of the spacing, refer to "based on display: inline-block List layout "part 6 Statistical table:

For example, for a 12-pixel contextmarginNegative value-3Pixel. Tahoma and Verdana are-4Pixel while Geneva is-6Pixel.

Due to the uncertainty of the external environment and the parent margin value of the last element, this method is not suitable for large-scale use.

4. Allow closed labels to take Capsules

Handle the following:

<Div class = "space"> <a href = "#"> melancholy <a href = "#"> calm <a href = "#"> hot blood </ a> </div>

Note: To be backward compatible with browsers such as Internet Explorer 6 and Internet Explorer 7, the end (closed) label of the last list cannot be lost.

In HTML5, we directly:

<Div class = "space"> <a href = "#"> melancholy <a href = "#"> calm <a href = "#"> hot blood </ div>

Okay, although it seems a little strange, but this is OK.

You can click here: Remove inline-block element spacing without closed tags demo

5. Use font-size: 0

Similar to the following code:

.space {    font-size: 0;}.space a {    font-size: 12px;}

This method basically solves the gap between inline-block elements in most browsers (ie 7 and other browsers sometimes have a 1 pixel gap ). However, there is a browser, Chrome, which has the minimum font size limit by default, because, considering compatibility, we also need to add:
Similar to the following code:

.space {    font-size: 0;    -webkit-text-size-adjust:none;}

Click Here (a simple demo created last year): font-size: 0 clear line break demo

Supplement:According to Mr. Du's remarks, Chrome has now removed the minimum font limit. Therefore-webkit-text-size-adjust:none;The Code may not be long enough.

6. Use letter-spacing

Similar to the following code:

.space {    letter-spacing: -3px;}.space a {    letter-spacing: 0;}

According to my tests last year, this method can basically deal with all browsers, including eating "East shoes", "Xidu (capsule)", and "Southland (gully oil) "," North calcium (Sanlu) "IE6/IE7 browser, but Opera browser has the problem of egg pain: The minimum spacing is 1 pixel, then,letter-spacingIt will be restored soon.

7. Use word-spacing

Code similar to the following:

.space {    word-spacing: -6px;}.space a {    word-spacing: 0;}

One is the Character spacing (letter-spacing) One is the word spacing (word-spacing. According to my tests,word-spacingAs long as the negative value of is large to a certain extent, the difference in compatibility can be ignored. Because, looks like,word-spacingEven if the negative value is large, it does not overlap.

Click here: word-spacing and element spacing removal demo

This is the same as the demo above. It will not be shown here. If you use Chrome, you may see that the spacing still exists. This problem exists because I am not clear, but I know that you can adddisplay: table;Ordisplay:inline-table;It also makes Chrome better.

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

VIII. Other finished product methods

The following shows how to use YUI 3 CSS Gridsletter-spacingAndword-spacingTo remove the grid unit, see the interval method (note that it is aimed at the horizontal element of the block, so the IE8-browser is hack processed ):

. The yui3-g {letter-spacing:-0.31em;/* webkit */* letter-spacing: normal;/* IE <8 reset */word-spacing:-0.43em; /* IE <8 & gecko */}. the yui3-u {display: inline-block; zoom: 1; * display: inline;/* IE <8: forged inline-block */letter-spacing: normal; word-spacing: normal; vertical-align: top ;}

The following is a method provided by RayM:

Li {display: inline-block; background: orange; padding: 10px; word-spacing: 0;} ul {width: 100%; display: table; /* Call webkit */word-spacing:-1em ;}. nav li {* display: inline ;}

That is, the combination of the above series of CSS methods.

IX. Conclusion

Other methods to remove the padding are also supported. You are welcome to add them through comments. Some of the above methods may fail to be fully tested. Therefore, some details may be missing. please correct me.

Reference: Fighting the Space Between Inline Block Elements

When multiple divs use display: inline-block, there is an interval between them.

Did you write it like this?
<Div>
<Div>
<Div>

If so, replace
<Div> </div> remove spaces and line breaks.

Css, how to deal with the space between Row-level labels, each time for some with display: inline-block

The first method is as follows ): <a> 1 </a> <a> 2 </a> <a> 3 </a> <a> 4 </a>, that is, there is no line break or space between tags.
Method 2: If you have to wrap the line:
This change (this method is a little bit out of the gap in ie6, but it works normally in other browsers ):
A {display: inline-block; width: 27px; height: 27px; text-align: center}
. Nav {font-size: 0}
. Nav a {font-size: 12px}
<Div class = "nav">
<A> 1 </a>
<A> 2 </a>
<A> 3 </a>
<A> 4 </a>
<Div>