CODEWITHSUNDEEP
htmlcss
iamPavan
iamPavan

Reputation: 275

CSS - for inline elements it is said that vertical margins(top|bottom) won't apply

Since img is an inline element, margin-top and margin-bottom is working.

    <img
     src="https://i.imgur.com/ZrTU3VK.jpeg"
     alt="Chuck Taylor All Star Shoe"
     style="margin-top: 10px"
    />

Even if i put display: inline, still vertical margins are working

Needed explanation, Thanks!

Upvotes: 0

Views: 49

Answers (1)

Viira
Viira

Reputation: 3911

Because

<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.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Upvotes: 3

Related Questions