Extra white space on line break of display inline-block

Question

Here's the code on JSFillde.net

When .a breaks in #t it leaves extra white space on the right side of #t. How can I remove it?

#t {
    height: 160px;
    background-color: #808080;
    font-size: 0;
    display: block;
width:50%;
}

.a {
    width: 100px;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

<div id="t">
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">
    </div>
</div>

Related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Feb 27 '16 at 10:39
Please be more clear, are the children 15% OR 100px wide? Is the parent always 50% or should it have a dynamic width based on children? — Aziz, Feb 27 '16 at 11:41

score 3 · Answer 1 · answered Feb 27 '16 at 10:30

3

Because each element has a width of 15%. 6 elements would cover 90% of the parent width, the 7th will be forced to go into the next row, thus causing a whitepsace of 10% in the previous row.

You can change 15% to something else, like 16.666%

#t {
  background-color: #fff;
  font-size: 0;
}

.a {
  width: 16.666%;
  height: 80px;
  background-color: black;
  display: inline-block;
}

.a:hover {
  background: red;
}

<div id="t">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

answered Feb 27 '16 at 10:30

Aziz

7,685
3
31
54

but that `.a` has to be 15%. – Megh Gandhi Feb 27 '16 at 10:32
Do you want to have exactly 6 elements in each row? – Aziz Feb 27 '16 at 10:33
its a responsive design.. it can be more than that – Megh Gandhi Feb 27 '16 at 10:35

xdevs23 · Answer 2 · 2016-02-27T10:38:19.977

Your problem is that .a has 15% of width, therefore the whole 15% will be swapped into the next line. My recommendation would be to make #t a multiple in size of .a, for example 90% or 105%. If you want not to change #t but if you can change .a, make .a 10% or 20%.

See here:

Your html stays the same.

#t {
    height: 160px;
    width: 90%;
    background-color: #808080;
    font-size: 0;
    display: block;
}

.a {
    width: 15%;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

<div id="t">
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">
    </div>
</div>

or:

Here you can also use 105% width. And your html stays again the same.

#t {
    height: 160px;
    background-color: #808080;
    font-size: 0;
    display: block;
}

.a {
    width: 10%;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

<div id="t">
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">
    </div>
</div>

Another solution would be to use flex:

#t {
    height: 160px;
    background-color: #808080;
    font-size: 0;
    display: flex;
}

.a {
    width: 15%;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

<div id="t">
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">
    </div>
</div>

okay remove 15% width and those boxes are of 100 px; https://jsfiddle.net/vaf2rpub/20/ — Megh Gandhi, Feb 27 '16 at 10:40

score 0 · Answer 3 · 2016-02-27T11:32:59.297

0

You can achieve the division of whole width of #t among the div of .a by using a little bit of jQuery. Simple math.

Whole area appears to be black. You can test it out by setting height of #t.

$(".a").css("width", function() {
  var w = $("#t").css("width");
  w = Math.floor(parseInt(w.slice(0, -2)) / 9);
  //  alert(w);   // For testing.
  return (w + "px");
});

#t {
  height: 100px;
  background-color: green;
  font-size: 0;
  display: block;
  border: 1px solid green;
  width: 70%;
}
.a {
  height: 80px;
  background-color: black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="t">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

Edit #1: Edited my jQuery code but still there is very little space left. If anyone have any idea. Free to edit and suggest.

edited Feb 27 '16 at 11:32

answered Feb 27 '16 at 10:57

and if the width is set to 100px ? – Megh Gandhi Feb 27 '16 at 11:11
@Megh Gandhi: Is width `100px` or `100%` ? – Feb 27 '16 at 11:11
@MeghGandhi: `jQuery` code will take the `width`, be it in `px` or `%`, and will divide it by `9` which is your number of divisions. Mathematically it will always deliver `div` of equal width. – Feb 27 '16 at 11:12
If your width is in `%` or `px` then suffix can be added. – Feb 27 '16 at 11:14
i want the width of that box to be 100px and the `#t` should resize according to the space of the boxes – Megh Gandhi Feb 27 '16 at 11:16
@MeghGandhi: Check my code now. I have made it compatible with every size. But still there will be a negligible amount of space left after last `div`. – Feb 27 '16 at 11:34

symlink · Accepted Answer · 2016-02-27T11:26:14.543

0

Give every block that isn't a multiple of 6 a 2% margin-right using margin-right and :nth-child(n6)

#t {
    height: auto;
    background-color: gray;
    font-size: 0;
    overflow:hidden;
}

.a {
    width: 15%;
    margin-right:2%;
    height: 80px;
    background-color: black;
    display: inline-block;
    box-sizing: border-box;
    border: solid 1px red;
}

.a:nth-child(6n){
  margin-right:0;
 }

<div id="t">
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">

    </div>
    <div class="a">
    </div>
</div>

edited Feb 27 '16 at 11:26

answered Feb 27 '16 at 10:59

symlink

11,984
7
29
50

Is this what you're looking for? – symlink Feb 27 '16 at 11:26
what about bigger displays such as 1920px as the view port size – Megh Gandhi Feb 27 '16 at 11:27
but what about a fixed width such as 100px – Megh Gandhi Feb 27 '16 at 11:33
You can't evenly space fixed width elements in a responsive container if you don't know how many elements you'll have. Anyway, I'd appreciate it if you checked my answer off since it solved the original issue you posted about. – symlink Feb 27 '16 at 12:03
I take that back. If the containers expand to fixed widths at breakpoints, like with twitter bootstrap, you can space fixed width boxes in them with no extra space at the ends of rows, using the same method I showed you, but using fixed width margins instead of percentages. – symlink Feb 27 '16 at 12:15
It does work and I already explained exactly how. You need to experiment more on your own. – symlink Feb 27 '16 at 13:33

Extra white space on line break of display inline-block

4 Answers4