inline img tag with width value

Question

All the inline element doesn't respect width value, they will take only required amount of width. Why this is not the case with img tag? After setting the display to inline image is respecting width value specified in html. https://www.w3schools.com/code/tryit.asp?filename=FYECKCZDC3GO

HTML

<!DOCTYPE html>
<html>
  <body>
    <img src="smiley.gif" style="display:inline;" alt="Smiley face" width="420" height="42">   
  </body>
</html>

My question is if you have span tag which is inline by default, now you if you add width to it, It will not have any rendering diff because span is inline. Why the same is not true for images?

Didn't get you brother. Can u be more specific? I am seeing that the image is taking space as defined in inline style. Thanks — Nayeem Parvez Chowdhury, Dec 21 '18 at 06:46
`img` is a `replaced inline element`. here is an answer that you might find helpful https://stackoverflow.com/a/12471525/9870559 — Nilesh Naik, Dec 21 '18 at 07:08
@NayeemParvezChowdhury My question is if you have span tag which is inline now you if you add width it will not have any rendering diff because span is inline. Why the same is not true for images? — Pavan Tiwari, Dec 21 '18 at 09:39

score 0 · Answer 1 · answered Dec 21 '18 at 10:15

If the element represents an image, the user agent is expected to treat the element as a replaced element and render the image according to the rules for doing so defined in CSS.

Height property apply to replaced inline elements.

inline img tag with width value

1 Answers1