Simple Margin Collapse issue

Question

Ok, my background is mostly on back end development, and this is because I really and greatly suck at styling stuff. I leave that to other people in my team. But right now I am having a small margin collapse issue that I do not seem to understand. Being that the issue is easy to replicate, the code will be added in here with a link to the site that will act as our fiddle.

But the issue is the next: I have a bootstrap navigation bar in which I am trying to change one of the items's background to yellow. Simple as that. The issue is that when I do I get a small black line in between(greatly noticeable), also, there is a huge white space right below it as well. The code is the following:

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

I have tried setting the margins in different combinations, but I can't seem to figure out how to stop the margin from collapsing in these parts:

The jsbin is:

https://jsbin.com/mibeyozexo/edit?html,output

Any input would be awesome. Cheers.

Do you mean black border around of "WebSiteName" block? It's just `
` border css property. Set it to 0 and the issue will dissapear. — dhilt, Oct 06 '17 at 17:29
It's unclear what the final object is and if the issue actually has anything to do with _"collapsing margins."_ Could you possibly mock-up the result you're looking for? — hungerstar, Oct 06 '17 at 17:30
@hungerstar there is a jsbin included at the bottom of the comment. Basically, In the picture, the 'WebsiteName' needs to be yellow, I changed the color of the div that contains it but I started to see some black lines at the bottom of it, I actually thought it was a border, but even after setting them to `none` I get the same result. @dhilt I tried that but it did not work. The example is in the jsbin btw, maybe I overlooked something. — sigillum_conf, Oct 06 '17 at 17:34
The JSBin doesn't make your problem statement more clear. You mention margins a lot but the issue appears to be borders. The border you're describing is on a different element (`.navbar` vs `.navbar-brand`). I converted your code to Stack Snippet which is preferable to a JSBin. — hungerstar, Oct 06 '17 at 18:27
@hungerstar I see. I'll look more into it. Thank man (for the edit and explanation), this is what I get for focusing solely on back end while knowing only basic styling in web design. Admittedly not my forte at all. I'll git gud. — sigillum_conf, Oct 06 '17 at 18:35

kyun · Accepted Answer · 2017-10-06T17:41:41.423

2

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
  margin: 0;
  border: none;
}

nav.navbar {
  border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid" style="">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

edited Oct 06 '17 at 17:41

answered Oct 06 '17 at 17:35

kyun

9,710
9
31
66

2

you don't need to use `important` here. just change the selector above it to `nav.navbar` and it'll be specific enough to override the border. – worc Oct 06 '17 at 17:40
Thank you guys, that did it! The answer that Jin gave was great and the addition by worc finalized it. One final question, was this an issue of margin collapse as I was under the impression or it was just a matter of wrong formatting on my part in regards to not knowing that a border was the cause of issue? Thanks again! Gamsahamnida! – sigillum_conf Oct 06 '17 at 18:07
@worc you don't even need to use `nav` in `nav.navbar` if custom styles are included after Bootstrap's (they should be). – hungerstar Oct 06 '17 at 18:26

RïshïKêsh Kümar · Answer 2 · 2017-10-06T17:48:25.837

You Can Unset or Remove the Border of Bootstrap Nav Bar Like This:

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

*{
margin:0px;
padding:0px;

}

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}




#yellow {
     background-color: #ffc424;
        margin-bottom: 0px;
    }
    
    #redBar {
     background-color: red;
        margin-top: 0;
        height:200px;
    }
    nav {
     margin-bottom: 0;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse" style="border-color: thistle;">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

Simple Margin Collapse issue

2 Answers2