add a white space between divs [duplicate]

问题

I am remaking the Google Chrome home page, but I'm stuck on the part at the bottom of the page with the spaces. I can't get them perfect. Two of the icons don't aline.

Here is what I need compared to what i get

At the sides the spaces are too small and in the middle they are too big.
If I can somehow make the spaces in the middle smaller and on the sides bigger then I can reproduce the first image

I tried
justify-content: space-between;
and
justify-content: space-around;
and
justify-content: space-even; they don't work

Here is my 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>

here is the 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;
}

any idea how i can do this, thanks (:

回答1:

To make perfect center alignment between inline divs, you can use text-align: center on display: inline-block divs.

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:

I have used justify-content: space-around; css its working proper. you set fixed width of row div, I have set this width:auto. Now you can use this code, I hope this will help you.

.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>

回答3:

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

来源：https://stackoverflow.com/questions/54785299/add-a-white-space-between-divs

标签

html

css

whitespace

spacing