I am wondering why img tag accept margin top property?
isn't this an inline tag? and inline tags does't accept top and bottom margins?
Asked
Active
Viewed 526 times
1
Turnip
- 35,836
- 15
- 89
- 111
Ehsan Mousavi
- 119
- 1
- 13
-
There's no need for any code! – Ehsan Mousavi May 22 '20 at 15:07
-
Use display inline-block or block. – Marcelo F. May 22 '20 at 15:10
-
1@ashishsingh there is no need code or snippet. The question as stated is pretty clear – Temani Afif May 22 '20 at 15:12
-
2It isn't clear to me as a native English speaker. It sounds like OP is asking why an img tag would randomly have a top margin. A code snippet would definitely have helped to clarify. – Turnip May 22 '20 at 15:13
-
1@Turnip it's asking why we can apply margin to image when it's supposed to be an inline tag and inline tag are known to not accept margin – Temani Afif May 22 '20 at 15:15
-
1Yes, your edit makes it clear. But as originally written, the meaning was completely different. – Turnip May 22 '20 at 15:15
-
1Sorry for my bad english guys, I'm not a native English speaker. @Temani Afif got the point. – Ehsan Mousavi May 22 '20 at 15:16
-
2That is why it is important to include code. It removes ambiguity. – Turnip May 22 '20 at 15:18
-
thanks @Turnip , now the question is altogether different – ashish singh May 22 '20 at 15:26
-
@TemaniAfif it was clear but it meant something else – ashish singh May 22 '20 at 15:27
1 Answers
4
It's because img is an inline replaced element and it does accept margin-top. It behaves differently than inline non-replaced element (like span for example).
Related part of the specification detailing this: https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height
Note that there is no restriction or special behavior related to margin unlike with non-replaced inline element where you can read:
The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
Same logic for width/height. They work with img but not with span.
Another related question dealing with transform where the same logic apply: CSS transform doesn't work on inline elements
Temani Afif
- 245,468
- 26
- 309
- 415