Why img element doesn't let text wrapped around it when it's inline-block element?-CodePudding

I searched but I couldn't figure out this !! as you know img tag is an inline-block as default but when I want to wrap text around it, I can't. I know that inline-block elements behave like inline elements to take the screen, I mean they take the screen just the content dimensions, but my question is why img element doesn't let text wrapped around it? I mean why do we need to use float?

<html lang="fa-IR">
    <head>
        <meta charset="utf-8">
        <title>Html toturial</title>
    </head>
    <body>
        <img src="download.png"/>
        hello<br>
        hello<br>
        hello<br>
    </body>
</html>

**NOTE: ** download.png file is on my local PC.

but I can show you the result! IMAGE OF MY CODE

CodePudding user response：

Inline and inline-block elements render on the same line (imagine lines of text in the book for example). And since img is inline-block element, it renders on the same line as the text next to it. So what you see in your example are three lines. First one contains image and text, the other two only contain text.

However two things happen here:

Inline-block also has height (by definition), which makes the first line higher.
All the elements in the line are (by default) vertically aligned to the bottom. That is why the text in the first line is aligned with lower border of the image.

In case you add float to the image, the concept of line is broken, which lets the subsequent content floating around.

CodePudding user response：

When you wrap the text in <span> elements it works as you described because <span>s are inline elements.

<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.

MDN

<html lang="fa-IR">
    <head>
        <meta charset="utf-8">
        <title>Html toturial</title>
    </head>
    <body>
        <img src="download.png"/>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
    </body>
</html>

CodePudding user response：

inline-block elements have some properties of block elements and some properties of inline elements … and neither of them have the property of "content wraps around them".

An image is rendered a lot like a single character. A large character.

So you might compare these two paragraphs:

img { display: inline-block; }
span { display: inline-block; font-size: 50px; }

<p>A <img src="http://placekitten.com/50/50">  that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>

<p>A <span>k</span>itten that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>

The inline block box generated by the image is a lot like the inline box generated by a letter of the same size.

Wrapping of text around images in HTML / CSS is achieved with the float property;

img { float: left; }
p.foo::first-letter { float: left; font-size: 50px; }

<p><img src="http://placekitten.com/50/50">  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>

<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>