我知道这是一个业余问题，但我完全迷路了。我只是刚刚开始我的网站，我希望在右边的两个标志之间添加一个小空间。我已经试了大约2个小时了，什么也找不到。这是HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="ie-edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./Style.css">
<title>Joshua's Portfolio</title>
</head>
<body>
<header>
<div class="logo-container">
<img src="./Images/photoroom.png" alt="Image not found" width="60px" height="40px">
</div>
<nav>
<ul class ="navbar-links">
<li><a class="navbar-link" href="$">HOME</a></li>
<li><a class="navbar-link" href="$">PROJECTS</a></li>
<li><a class="navbar-link" href="$">ABOUT</a></li>
</ul>
</nav>
<div class="socials">
<img src="./Images/linkedin-original.svg" alt="Image not found" width="30px" height="55px">
<img src="./Images/github-original.svg" alt="Image not found" width="30px" height="55px">
</div>
</header>
</body>
</html>
这是CSS -
* {
margin: 0px;
padding: 0px;
box-sizing: border-box
}
body {
font-family: 'Raleway', sans-serif;
background-color: #c8b69a;
}
header {
display: flex;
width: 90%;
margin: auto;
background-color: #814E10;
align-items: center;
}
.logo-container, .navbar-links, .socials {
display: flex;
}
.logo-container {
flex: 1;
}
nav {
flex: 2;
}
.navbar-links {
justify-content: space-around;
list-style: none;
}
.navbar-link {
text-decoration: none;
}
.socials {
flex: 1;
justify-content: flex-end;
margin-right: 13px;
}
如果有人有任何建议，我将不胜感激，谢谢!
你所需要做的就是定义你想要添加边距的元素:
.socials img:first-child {
margin-right: 13px;
}
这样，你可以说，在.socials类中，img的第一个元素的margin-right将等于13px。
好的，我觉得你已经学习了CSS，这是一个痛苦的过程，你不想瞄准社会阶层，因为那是img的父母。(假设有一个盒子包裹着2张图片)
你的目标是…(.社交img {})
这将针对单独的img标签，从那里你想要添加一个13px的左距。
不要设置margin-right因为那样会把两个图片都推到导航条左边13px，使它们不均匀
.socials img {
margin-left:13px
}