How to prevent that the code indentation affects the rendering of elements with inline-block?

Question

I have two elements containing divs with the inline-block property.

The code of the divs inside this container is not indented:

<div class="container-no-indentation">
    <div>
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div>
    </div>
</div>

And the code of the divs inside this second container is indented:

<div class="container-indentation">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</div>

jsfiddle:

http://jsfiddle.net/a7purzk1/

If you run the jsfiddle you will se that the divs inside ".container-no-indentation" are rendered more close each other than the divs within ".container-indentation".

Why is that happening and how can I prevent this behaviour?

Since the divs within ".container-no-indentation" are dynamically generated, they will always be unindented, and I want them to be displayed like the divs inside ".container-indentation".

Thanks in advance!

EDIT:

This is how I generate the divs:

var noIndent = document.querySelector(".container-no-indentation");

for (var i=0; i<7;i++) {
    var div = document.createElement("div");
    div.innerHTML = i+"";
    noIndent.appendChild(div);
}

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Oriol, Apr 18 '15 at 13:42

score 2 · Accepted Answer · answered Apr 18 '15 at 13:49

You can add float:left to avoid the extra spaces.

See demo: http://jsfiddle.net/a7purzk1/1/

(you might want to use :after pseudo element to clear the float, as in the example)

This happens because the inline-styled elements (inline and inline-block) take the whitespace into account. E.g. if you'd want to have an inline-block image in the middle of a text paragraph, you'd want it to have whitespace as you describe with spaces.

So basically there is an extra space between the divs. Browser just strips the spaces that you have maximum of one space between the elements.

score 1 · Answer 2 · answered Apr 18 '15 at 14:02

If you want to have a space between generated inline-bloke elements then you need to manually insert some whaitespace character after each one. In your case the simple approach is to append just simple textNode after div:

var noIndent = document.querySelector(".container-no-indentation > div");

for (var i = 0; i < 7;i++) {
    var div = document.createElement("div");
    div.innerHTML = i;
    noIndent.appendChild(div);
    noIndent.appendChild(document.createTextNode(' '));
}

Demo: http://jsfiddle.net/a7purzk1/3/

Or if you want shorter:

noIndent.appendChild(div).insertAdjacentHTML('afterend', ' ');

score 1 · Answer 3 · answered Apr 18 '15 at 14:33

You could simply add a value for the right margin on the div's:

.container-indentation,
.container-no-indentation {
  width: 90%;
  margin: auto;
}
.container-no-indentation > div > div,
.container-indentation > div > div {
  display: inline-block;
  width: 12%;
  text-align: center;
  border: 1px dotted gray;
}
.container-no-indentation > div > div {
  margin-right: 5px; /* use some suitable value */
}

<h1>No indentation</h1>
<div class="container-no-indentation">
  <div>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div>
  </div>
</div>

<h1>Indentation</h1>
<div class="container-indentation">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>
</div>

How to prevent that the code indentation affects the rendering of elements with inline-block?

3 Answers3