Margin increasing size of an element

HTML-CSS
1

Tell us what’s happening:
Does margin increase the size of an element? I’m referring to the navbar getting bigger whenever I increase the margin of the ul. I don’t remember anything about this and I’ve been busy at school so I might have forgotten something.

Your code so far


<style>
body {
  min-height: 150vh;
}
#navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #767676;
}
nav ul {
  margin: 1px;
  padding: 5px 0px 5px 30px;
}
nav li {
  display: inline;
  margin-right: 20px;
}
a {
  text-decoration: none;
}
</style>
<body>
<header>
  <h1>Welcome!</h1>
  <nav id="navbar">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Lock an Element to the Browser Window with Fixed Positioning

Link to the challenge:

1 Like
2

Hi @belandresyenandrei. It is possible that margins decrease the size of an element. But, I don’t know whether it’s possible that margins increase an element’s size. I have seen paddings increase the size of an element. If you have any live link for your project, kindly send it.
Try this code also:

body {
   box-sizing: border-box;
}
1 Like
3

Hello! I don’t know anything about that, but I got the code from the challenge: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning

I got this problem when I changed the navbar position to fixed. Sorry if this wasn’t mentioned earlier.

1 Like
4

Hey @belandresyenandrei. The reason the navbar is getting bigger is because you are changing the nav ul's margin. The nav ul is a children of #navbar and when you increase the margin of nav ul, the navbar has no choice but to become bigger. This is not a problem with position: fixed;.

This illustration may help you:

Without increasing nav ul's margin:
Frame 1 (2)

After increasing nav ul's margin:

Frame 2
Frame 2750×71 819 Bytes

The arrows in the image indicate the margin of the nav ul.

Hope this helps.

1 Like
5

I think position: fixed is part of the problem. The navbar was significantly bigger with position:fixed specified on the nav ul selector than leaving it empty. I appreciate your help!

1 Like