[Original] is horizontal gaps produced by in-row elements a bug?

During code design, refactoring engineers like to manually delete the extra gaps generated between the elements in the row and set the margin or padding to get the desired spacing? Such as code:

<Div class = ""> <SPAN class = "BGR"> removed spacing </span> <SPAN class = "BGR"> removed spacing </span> <SPAN class = "BGR"> removed spacing </span> <SPAN class = "BGR"> removed spacing </span> <SPAN class = "BGR"> removed spacing </span>/ span> <SPAN class = "BGR"> removed spacing </span> </div>

However, after the spacing is deleted, the code is piled up to be quite uncomfortable. Especially after the Refactoring is transferred to the JS colleagues, the JS colleagues will complain after reading the code, and the code is too messy, what they want to see is this Code:

<Div class = ""> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span>/ span> <SPAN class = "BGR"> linefeed generation interval </span> </div>

In fact, the clear and easy-to-read and modify code provided to JS colleagues is also a reflection of the ability of refactoring engineers.

 

Understanding the causes of Horizontal spacing of elements in a row helps us solve this problem. What are the causes of this gap?

1. line breaks between elements in a row generate spacing

<Div class = ""> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span>/ span> <SPAN class = "BGR"> linefeed generation interval </span> </div>

The results are as follows:

2. Use tab to generate spacing between elements in a row

<Div class = ""> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span>/ span> <SPAN class = "BGR"> linefeed generation interval </span> </div>

The results are as follows:

3. Use "space" to generate spacing between elements in a row

<Div class = ""> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> linefeed interval </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span> <SPAN class = "BGR"> line break generation spacing </span>/ span> <SPAN class = "BGR"> linefeed generation interval </span> </div>

The results are as follows:

 

The preceding three points show that the spacing between elements in a row is caused by line breaks, tabs, spaces, and other characters. The character size is controlled by defining the font size.

Can I adjust the spacing of elements in the row by changing the font size?

 

Change the font from 0px ~ 18px ~ The adjustment of 36px indicates that the horizontal spacing between elements in a row increases from scratch, indicating that the spacing between elements in a row is calculated by line breaks and tabs) if the font size is set to font-size: 0, can the padding be removed from all browsers?

After testing, we can find that setting font-size: 0 does not cause additional spacing generated by line breaks, tabs, spaces, and so on in all browsers to disappear:

1. 1px gaps in IE 6 and 7 browsers

2. The latest version of Safari (5.1.7) does not support browsers with 0 font sizes.

After searching for information, a normal solution is as follows:

1. For IE6 and 7 browsers, use Word-spacing to fix the 1px gap that always exists in IE6 and 7, and reduce the gap between words (that is, word interval)

* Word-Spacing:-1px;

2. Use the private attributes of WebKit to prevent the font size from being adjusted by the device. You can define a font size smaller than 12px.

HTML {-WebKit-text-size-adjust: none ;}

The Code is as follows:

Structure: <Div class = "span-wrap"> <span> generation interval </span> <span> generation interval </span> </div> style: HTML {
-WebKit-text-size-adjust: none;/* use the private attributes of WebKit to prevent the font size from being adjusted by the device. You can define a font size smaller than 12px */
}. Span-wrap {font-size: 0;/* all browsers */* word-Spacing:-1px; /* use Word-spacing to fix the 1px gap that always exists in IE6 and 7, and reduce the gap between words (that is, word interval )*/}. span-wrap span {font-size: 12px; letter-Spacing: normal;/* set the letter spacing to 0 */word-Spacing: normal; /* set the word and field spacing to 0 */}

Some students ask why it is so complicated. They simply use floating, simple, and redundant hack.

It is undeniable that the use of floating technology is a good method. In actual work, we use floating technology a lot, but not everywhere, you also need to clear the Float after using float.

At work, we can constantly try to use the new method to solve problems, maintain the spirit of pursuing fashion, and continuously enrich our knowledge. Good Code also facilitates better teamwork and is an indicator that reflects your own capabilities.