Question

Consider following code:

<p style="margin: 30px 0; padding: 0;">Some text some text some text some text some
text some text some text some text</p>

<p style="margin: 30px 0; padding: 0;">Some text some text some text some text some
text some text some text some text</p>

<input type="button" value="Button" style="margin: 30px 0; padding: 0; float: right;"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

30px margin expected between last p and input but there is 60px margin. Apparently margin collapsing not working. How to fix CSS rules of input while keeping the ability of input to produce 30px vertical margin on top?

Answer 1

Try setting display:block on the input

EDIT: Just throw a wrapper around it then?

http://jsfiddle.net/8mqHZ/13/