Padding of a div gets bigger when element inside it is big-CodePudding

I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?

HTML

<body>
    <div class='navbar'>
        <a href='home.html'>Home</a>
        <a href='1.html'>Profile</a>
        <a href='2.html'>Transactions</a>
        <a href='3.html'><p>Settings</p></a>
        <img src='tempimage.png' id='image1'/>
    </div>
</body>

CSS:

.navbar{
    background-color:green;
    padding:20px;   
}
.navbar #image1{
    width:40px;
    margin-left:950px;
    padding:0px;
}

CodePudding user response：

You should first start by removing margin-left:950px as the margin will exclude you item from your nav bar

then apply flex properties to your navbar .navbar {display : flex} so your navbar items become in the same line

i recommend checking out this flex-box guide as well flexbox properties

CodePudding user response：

can you please share the image's link so we can help you?

also you most edit margin-left:950px; to margin-left: auto; if you want to center it

and this is an example navbar code (press run to see what is it)

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navbar{
  padding: 10px 20px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
}
.navbar li{
  list-style: none;
  display: inline-block;
  padding: 0 20px;
  cursor: pointer;
}
.navbar li a{
  color: white;
  text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
  color: #666;
}

.navbar img{
  width: 50px;
  height: 50px; /*or :auto ; */
}

<ul class="navbar">
  <li>home</li>
  <li>project</li>
  <li>contact</li>
  <li><a>settings</a></li>
  
  <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>

<br><br><br>
<p>or</p>
<br><br><br>

<ul class="navbar">
  <img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
  <li>home</li>
  <li>project</li>
  <li>contact</li>
  <li><a>settings</a></li>
  
 
</ul>

I think you need to learn the basics before start doing websites