Gap Between inline and inline-block

During front-end layout, we occasionally find that there is a small gap between elements with the inline/inline-block attribute. Some articles on the Internet say this gap is 6px, but I think it should be the width of a space.

Here we use inline-block as an example:

Below are some codes and their corresponding:

CSS:

span{        background:red;        display:inline-block;}

HTML:

<Span> Hello </span>

:

If you only change the HTML part

<Span> Hello </span>

Then:

We can see that there is a small gap in the middle, which is generated by the line feed.

If you change the CSS part at the same time, set font-size to a relatively large value.

*{    font-size:36px;}span{        background:red;        display:inline-block;}

 

We have

We can see that the gap has become larger.

If we replace the line feed of the HTML part with a space, we can achieve the same effect.

It can be seen that the gap between inline and inline-blocks is indeed generated by line breaks, and its size is a space width (here we will describe that the space width refers to the space width of the corresponding parent element ).

 

Gap Between inline and inline-block