Issue
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
Solution
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.
Answered By - Tomas Korinek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.