徽标和公司名称之间的空格

Question

我想增加我公司的标志和公司文字之间的空间。下面是我的代码：

<div class="navbar">
            <img class="logo" src="Images/logo.png" width="60" runat="server" /><h1 style="color:white;">This is my company name</h1>

        </div>

这是样式表：

 @media screen and (min-width: 768px) {
    .navbar {
        display: flex;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
        position: absolute;
        top: 0px;
        width: 100%;
        margin-right:200px;
        flex-direction:row;
    }

下面是标志图片和公司名称：

Answer 1

如果您使用 flexbox，请确保使用 justify-content: space-between;，这里也是 JSFIDDLE 链接，您可以自己查看它的外观，我还包含了第二个版本我使用 justify-content: space-around; 和 padding 来居中导航栏内容并为它们提供与角落相同的空间

Answer 2

您正在使用 justify-content: space-between;，它将共享您的子元素之间的空间。 删除它并在徽标上使用 margin-right