Why can't I add top margin to my tag when I am using bootstrap?

Question

I was creating a navigation bar while using bootstrap framework.

My html code is as follows:

<!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";
}

but the top margin does not work. It always look like this enter image description here

So frustrated! Thank you for your help!

j08691 · Accepted Answer

Because by default, links are inline elements and inline elements don't have top/bottom margins. Change the link to an inline-block element instead.

.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

(and here's a bonus link to the spec if you're interested, "vertical margins will not have any effect on non-replaced inline elements.")

Why can't I add top margin to my <a> tag when I am using bootstrap?

Tags:

html

css

twitter-bootstrap

user3352464

1 Answers

j08691

Recent Activity

Donate For Us