给子元素设置margin-top无效果的一种解决方法

Posted 2020-11-04 这梦想，不休不止

在写一个登陆界面的时候，设置登录按钮的margin-top时出了问题

先是这么写的

<div style="margin-top:30px">
　　<a style="float:left">注册</a><a style="float:right">找回密码</a>
</div>
<input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" style="margin-top:20px" value="登录"/>

 登录按钮上面是两个a标签，我想让按钮与两个a标签有一些距离，这个button的样式是引用的bootstrap里面的。但是这么写完以后发现外边距并没有起作用。

然后给button套了一个div，设置div的margin，比如这样：

<div style="margin-top:20px;width:100%">
　　<input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" value="登录"/>
</div>

 结果还是不行，然后各种查资料尝试后，发现可以给button的父级div加一个float，比如这样：

<div style="float:left;margin-top:20px;width:100%">
　　<input type="submit" name="" id="" class="btn btn-lg btn-block btn-primary" value="登录"/>
</div>

 成功。

因为我设置的button宽度是100%，所以float对样式的效果并没有什么影响，所以这也算一种解决方法了。

总结：查资料的时候了解到，在Firefox下对margin的处理有些它自己的特点，这里不阐述，网上好多相关知识