Some friends who have just started learning the web front-end will encounter such a problem when they first come into contact with the inline element. There is always a small gap between two elements such as <span>, which cannot be removed, so how to solve it? ?
When we add content to the span element, there is a gap between the text of two adjacent span elements
Question: So what exactly is this gap?
Actually it is a space.
Question: How did this space come from?
First, let’s take a look at our usual code writing habits.
We are excellent programmers, and the format of the code is required to be standardized, so my second span wraps
And it is this unfaulty line break that creates a gap between the two spans.
Let's see how to solve it
Smart, you have a clever idea, write the code one line at a time
This method is the most simple and rude to solve the problem, but the rude method often causes a lot of uncontrollable factors, and many scenes in the later stage may also cause people to collapse. After all, team development projects involve multiple people participating, which requires code writing. For the normative person, this way of writing simply crushes the obsessive-compulsive disorder... (there is already a picture in the head--.)
Let's take a look at the second method
Add font-size:0 to the parent element; add font-size:;
But this method also has problems. First, the font-size is rewritten once (First Blood), and then there is still a gap in some old browsers (Double Kill) or some browsers have font-size: 12px; The support is not friendly (Trible Kill).
Great God’s solution:
Add float to the span, perfect solution, hahaha full...
This article is from Qianfeng Education , please indicate the source for reprinting.