form input button and margin

In the second one, the words and the button overlap. I'm not immediately
sure what's special enough about that case to cause that.


<button type="submit" style="font-size: 200%; margin-bottom: 1em; width: 100%;">button submit margin bottom</button> words words
<p>
<input type="submit" value="input submit margin bottom BAD" style="font-size: 200%; margin-bottom: 1em; width: 100%;"> words words
<p>
<input type="submit" value="input submit" style="font-size: 200%; width: 100%;"> words words
<p>
<div style="font-size: 200%; margin-bottom: 1em; width: 100%; border-width: 1px; border-style: solid">div margin bottom</div>
words words
<p>
<img src=file:/tmp/whatever border=1 style="margin-bottom: 1em; width: 100%">
words words