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

Posted 这梦想,不休不止

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了给子元素设置margin-top无效果的一种解决方法相关的知识,希望对你有一定的参考价值。

在写一个登陆界面的时候,设置登录按钮的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的处理有些它自己的特点,这里不阐述,网上好多相关知识

以上是关于给子元素设置margin-top无效果的一种解决方法的主要内容,如果未能解决你的问题,请参考以下文章

bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法

0331-智还王项目整理

子元素使用margin-top影响父元素的解决方法

css 如何解决margin-top使父元素margin失效

子元素设置margin-top影响到父级的原因及办法

子元素的margin-top属性为啥会影响父元素的margin-top?