在 div 之间添加一个空格 [重复]答案

【问题标题】：add a white space between divs [duplicate]在 div 之间添加一个空格 [重复]
【发布时间】：2019-02-20 21:08:15
【问题描述】：

我正在重新制作 Google Chrome 主页，但我被困在页面底部带有空格的部分。我不能让他们完美。其中两个图标不对齐。

与我得到的相比，这是我所需要的

两侧的空间太小，中间的空间太大。
如果我能以某种方式使中间的空间更小而侧面的空间更大，那么我可以重现第一张图片

我试过了
justify-content: space-between;
和
justify-content: space-around;
和
justify-content: space-even; 他们不工作

这是我的html

<div class='mostUsedApps'>
    <div class='row'>
    <div class='youtube rowCell'></div>
    <div class='facebook rowCell'></div>
    <div class='roblox rowCell'></div>
    <div class='Agar rowCell'></div>
    <div class='gmail rowCell'></div>
</div>
</div>

这是css

.youtube{
     background-image: url(youtube.png);
}
.facebook{
     background-image: url(facebook.png);
}

.roblox{
     background-image: url(roblox.png);
}

.Agar{
     background-image: url(Agar.png);
}

.gmail{
     background-image: url(gmail.png);
 }


.rowCell {
    width: 256px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
}
.row {
    padding: 120px 0 0 424px;
    height: 112px;
    width: 525px;
    display: flex;
}

知道我该怎么做，谢谢（：

【问题讨论】：

抱歉发错了，我会改正的
另外，如果你创建一个 fiddle / sn-p 重现问题会更好
仍然需要另一个结束 div 标签。图片的尺寸是多少？
<div class='row'> 的结束标签在哪里？？
图片大小为48*48

标签： html css whitespace spacing

【解决方案1】：

要使内联 div 完美居中对齐，您可以在 display: inline-block div 上使用 text-align: center。

div.container {
  text-align: center;
}

div.icon {
  width: 30px;
  height: 30px;
  
  display: inline-block;
  margin: 10px;
  
  background-color: #eee;
  border-radius: 100%;
}

<div class="container">
  <div class="icon youtube"></div>
  <div class="icon facebook"></div>
  <div class="icon gmail"></div>
  <div class="icon site4"></div>
  <div class="icon site5"></div>
  <div class="icon site4"></div>
</div>

【讨论】：

【解决方案2】：

我已经使用justify-content: space-around; css 正常工作。你设置了row div 的固定宽度，我设置了这个width:auto。现在你可以使用这段代码了，希望对你有帮助。

.youtube{
     background-image: url(youtube.png);
}
.facebook{
     background-image: url(facebook.png);
}

.roblox{
     background-image: url(roblox.png);
}

.Agar{
     background-image: url(Agar.png);
}

.gmail{
     background-image: url(gmail.png);
 }


.rowCell {
    width: 61px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
    background-color: red;
    border-radius: 50%;
background-size: 100% auto;
background-position: center;
}
.row {
    padding: 0;
    height: 112px;
    width: auto;
    display: flex;
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
}

    <div class='mostUsedApps'>
     <div class='row'>
        <div class='youtube rowCell'></div>
        <div class='facebook rowCell'></div>
        <div class='roblox rowCell'></div>
        <div class='Agar rowCell'></div>
        <div class='gmail rowCell'></div>
    </div>
    </div>

【讨论】：

您是否尝试过使用背景图像，因为它似乎对我有用
一分钟，我正在更新这个。
现在使用这个 css 并检查它。还将 red 背景 css 删除到您的 css 中
我做了但没用
你能给我你的图标图片网址吗？任何图标

【解决方案3】：

.rowCell {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size:50%;
    background-position:center;
    border:1px solid #000;
    display:inline-block;
    }

【讨论】：