Question

我在使用bootstrap框架时创建了一个导航栏。

我的HTML代码如下：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <link href = "css/bootstrap.min.css" rel ="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
      <div class="container-fluid">
        <div  class="navbar-landing">
            <a href="www.bloomboard.com"><b>BB</b> COLLAB</a>
        </div>
      </div>


</body>
</html>

CSS：

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");

.container-fluid{
    padding:0;
}
.navbar-landing{
    background-color:#FD761F;
    height:60px;
    width:180px;
    display:block;
    float:left;
}
.navbar-landing a{
    text-decoration: none;
    margin-top:30px;
    margin-left:60px;
    color:#ffffff;
    font-size: 20px;
    font-family: "Open Sans";
}

但是上边距不起作用。它总是这样 enter image description here

太沮丧了！谢谢你的帮助！

Answer 1

因为默认情况下，链接是内联元素，而内联元素不具有上/下边距。改为将链接更改为内联块元素。

.navbar-landing a{
    text-decoration: none;
    margin-top:30px;
    margin-left:60px;
    color:#ffffff;
    font-size: 20px;
    font-family: "Open Sans";
    display:inline-block;
}

<强> bootply example

（如果您感兴趣，此处为规范奖励link，＆＃34;垂直边距不会对未替换的内联元素产生任何影响。＆＃34;）

Answer 2

您需要将链接显示为块（如果您希望在同一高度保留多个链接，则需要显示内联块）。在链接css中添加display属性，如下所示：

.navbar-landing a {
    display:inline-block;
    text-decoration: none;
    margin-top:30px;
    margin-left:60px;
    color:#ffffff;
    font-size: 20px;
    font-family: "Open Sans";
}

为什么我无法为我的<a> tag when I am using bootstrap?</a>添加上边距

2 个答案: