html - 为什么我在使用 bootstrap 时不能将上边距添加到我的 <a> 标签？-6ren

html - 为什么我在使用 bootstrap 时不能将上边距添加到我的标签？

转载作者：行者123 更新时间：2023-11-28 04:33:59

24

4

我在使用 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

好郁闷!感谢您的帮助!

最佳答案

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

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