Why Does The Img Tag Accept The Margin-Top Property

Why does the img tag accept the margin-top property?

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

Margin-top doesn't work after img element

Span element is inline element not a block element. So they ignore vertical margin value.

Solution is you can make the span element display:inline-block; Now you can use margin property.

Check this Demo jsFiddle

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS" style="width:200px; height: 200px;"></img>
<br />
<span style="margin-top: 300px;display:inline-block;">my text</span>

Margin-top not working for p and a tag?

This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements.

The margins of adjacent siblings are collapsed

That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag.

And on the a tag the margin doesn't work because it's an inline element. You may need to change its display property to inline-block or block.

Margin top issues

You can change the vertical-align property to change how the elements display. I think that applying vertical-align: top to the image solves your problem:

Preview: http://jsfiddle.net/Wexcode/AMWjH/23/

Also, the reason why the margin-top and margin-bottom aren't affecting your span element is because span is an inline element. You can change it to inline-block or block to apply this margin (changing it to block will override vertical-align).

I've tried float and margin-top but the image will not align with the text

float right is designed to do what you want - to float a picture on the right and let any text not just sit to the left of it but to flow underneath it if it is too long.

However, by the time you have the h2 and the div painted it's too late as the content has moved onto a new line. If you put the float before them then the system knows what space to allow for the image and the h2 and div will sit to its left.

.device {
width: 400px;
height: 500px;
margin-bottom: 0x;
float: right;
}

<div class="info">
<img class="device" src="https://picsum.photos/id/1015/400/300" alt="text">
<h2 id="the-benefits" class="info-header">The benefits<h2>
<p id="the-benefits"> Text about benefits.</p>
</div>

HTML 5 strange img always adds 3px margin at bottom

This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

Add margin-top to image inside html table

Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :

td img {
    margin-bottom:-4px;
}

---

Related Topics