If span is an inline element why breaks the line in this practice?

Right click and view image to see it clearly.

paragraphs are block elements, so you have:

block element
inline element
block element

the block elements cause the inline element to be on its own line. If you would add another inline element (like an image), the span and image would be inline.

Thanks for your explanation, could you tell me please how I can make a block element e.g <p> and the <span> be in the same line?

Depends on why and how. You could nest the span within the paragraph. You could use CSS to change display or positional settings.

I put it inside the <p> but looks ugly, I want to have the <span> box just at the adjacent space to the left side of the paragraph without being overlap by the two black boxes.

I try to use margin but it mess all around, what I need to use?

span isn’t a box.

with what you want to do, seems like something slightly more sophisticated is needed. You could use inline-block, float, flexbox or grid. There are so many options here.