Margin increasing size of an element

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

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;
  <nav id="navbar">
      <li><a href="">Home</a></li>
      <li><a href="">Contact</a></li>
<p>I shift up when the #navbar is fixed to the browser window.</p>

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

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

Hello! I don’t know anything about that, but I got the code from the challenge:

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

1 Like

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:

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

Hope this helps.

1 Like

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