如何将边距顶部添加到引导程序 col/form 内的超链接

Question

我正在尝试美化引导中的表单。我不明白为什么我不能为输入下方的超链接添加一些边距？我试图删除引导程序，但没有奏效，所以我认为这与引导

程序无关！

https://jsfiddle.net/k8ws75je/

  <div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">

    <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
        <label for="name" class="col-md-4 control-label">Name</label>
        <div class="col-md-6">
            <input id="name" type="text" class="form-control" name="name" value="" required autofocus>

                <span class="help-block">
                    <strong></strong>
                </span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-md-4 control-label">E-Mail Address</label>
        <div class="col-md-6">
            <input id="email" type="email" class="form-control" name="email" value="" required>

                <span class="help-block">
                    <strong></strong>
                </span>
        </div>
    </div>

    <div>
        <div class="col-md-6 col-md-offset-4">
            <a id="linkpassword" href="#">Change Password</a>
            <button type="submit" class="btn btn-success pull-right">
                Update
            </button>
        </div>
    </div>
</form>

#linkpassword{
  margin-top: 400px;
}

Answer 1

这是因为a元素是inline元素，不能有垂直边距。将其更改为inline-block以使其正常工作

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

https://jsfiddle.net/knu1badd/1/

Answer 2

#linkpassword{
  margin-top: 400px;
  position:absolute;
}

Answer 3

让它display: block .因此，它将如您所愿。

Answer 4

div块中a元素变形，并在此块上应用仓位/边距。因为a是内联元素。

<div class="margin-top">
   <a id="linkpassword" href="#">Change Password</a>
</div>