0

Consider these three snippets where I'm giving margin-bottom to each of the input types one-by-one. While the other input types push the item below by '10px', input type="img" does the exact opposite and it pushes itself. 

<input type="submit" />
<input type="image" src="https://via.placeholder.com/150/0000FF/808080?Text=Digital.com" style="margin-bottom:10px"/>
<input type="text"/>

<div style="background-color:blue">bottom text</div>

<input type="submit" style="margin-bottom:10px"/>
  <input type="image" src="https://via.placeholder.com/150/0000FF/808080?Text=Digital.com"/>
<input type="text"/>

<div style="background-color:blue">bottom text</div>

<input type="submit" />
  <input type="image" src="https://via.placeholder.com/150/0000FF/808080?Text=Digital.com"/>
<input type="text" style="margin-bottom:10px"/>

<div style="background-color:blue">bottom text</div>

P.S I came up with this while having the discussion on Why does margin works differently on input type image than the other types of input elements? And I thought of editing the question to this. However, I'm not sure if the OP meant the same, so putting this as another question.

ABGR
  • 4,631
  • 4
  • 27
  • 49
  • keywords: vertical-align and baseline – Temani Afif Jun 22 '20 at 16:03
  • if you make all the elements vertical-align: bottom; then margin will behave the same for all – Temani Afif Jun 22 '20 at 16:04
  • @TemaniAfif As a matte of fact, that was exactly my initial thought :) However, I just wonder why all of these not behave exactly the same without vertical-align? I mean the other two should have been pushing themselves too without this. – ABGR Jun 22 '20 at 16:10
  • you need to understand how to identify the baseline of each element and you will clearly see why the margin doesn't behave the same. The basline of the image isn't the same as the baseline of input element. It's even more complex if you add overflow to input. Check the duplicate, you will find a detailed explanation. I cannot do this inside the comment section – Temani Afif Jun 22 '20 at 16:17
  • @TemaniAfif thanks. Let me check that. – ABGR Jun 22 '20 at 16:18

0 Answers0