如何为Bootstrap列/表单内的超链接添加margin-top？

嘿，我来帮你搞定这个小问题！你遇到的情况其实和CSS的基础特性有关，和Bootstrap真的没关系~

问题根源 #

<a>标签默认是行内元素（inline），而CSS里行内元素的上下外边距（margin-top/margin-bottom）是不会被浏览器解析生效的——这就是你加了margin-top: 400px却看不到效果的核心原因。

解决方案 #

只需要把这个链接元素改成支持上下外边距的元素类型就行，有两种常用方式适配你的布局：

1. 改为行内块元素（推荐，不破坏当前同行布局）

行内块元素（inline-block）既保留了行内元素可以和其他元素（比如你的按钮）在同一行的特性，又支持块级元素的margin、padding等属性。修改你的CSS如下：

#linkpassword{ 
  margin-top: 400px; 
  display: inline-block;
}

2. 改为块级元素

如果希望链接独占一行，可以用block属性：

#linkpassword{ 
  margin-top: 400px; 
  display: block;
}

额外提示 #

你的链接和按钮都在.col-md-6 col-md-offset-4容器里，用inline-block的话，两者依然可以保持在同一行，只是链接会获得你设置的上边距，完美适配你的布局需求~

内容的提问来源于stack exchange，提问作者BitByBit