div内的元素越大，div的内边距越大

Question

我想把一个图像放在我用于导航栏的div上，但是当我将图像大小调整为50px或以上时，div上的填充也变大了。我不喜欢这样，因为图像要么太小看不清，要么导航栏太大，看起来不讨人喜欢，有什么办法解决这个问题吗?

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

<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='https://picsum.photos/200/300' id='image1'/>
</div>

Answer 1

您应该首先删除margin-left:auto因为空白将把您的项目从您的navbar

中排除。然后在导航栏上应用flex属性.navbar {display : flex}所以你的navbar项变成在同一行

我建议你也看看这个flex-box指南

Answer 2

你能分享图片的链接以便我们帮助你吗?

如果你想居中，你可以将margin-left:950px;编辑为margin-left: auto;

这是一个示例导航条代码(按run看看它是什么)

*{
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>

我认为你需要在开始做网站之前学习基础知识