The solution to the front-end inline element gap problem

      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.

Guess you like