Inconsistent behavior of inline-block elements when created via JavaScript

Question

I have a bunch of the same divs whose display property is set to inline-block. I know that inline-block elements have, by default, some margin around them so without any modification, I would expect some free space surrounding these elements (this question is not about removing them).

If I simply hard-code them into html file, then they behave as I expect them to.

* {
  margin: 0;
  padding: 0;
}

div.box {
  width: 100px;
  height: 40px;
  background: red;
  display: inline-block;
}

<div tabindex="1" class='box'></div>
<div class='box'></div>
<div class='box'></div>

But if I start adding them via JavaScript, the top and bottom margins stays the same, but left and right seems to disappear.

In this code, if I tab into the first element and then hit enter, the new div is created and added into DOM but as mentioned above, margins are gone when I start adding more of them (hitting enter multiple times).

const btn = document.querySelector('div.box');

btn.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    const box = document.createElement('div');
    box.className = 'box';
    document.body.appendChild(box);
  }
});

* {
  margin: 0;
  padding: 0;
}

div.box {
  width: 100px;
  height: 40px;
  background: red;
  display: inline-block;
}

<div tabindex="1" class='box'></div>

Anyone knows why there is a difference in how these divs are rendered when hard-coded vs added programmatically? Is there something wrong with the JavaScript code?

j08691 · Accepted Answer · 2018-05-18 18:51:22Z

6

You're confusing white space with margins. Inline elements are sensitive to white space in your code, so when you generate them via JS, that whitespace doesn't exist unless you manually add it. The easiest way to see this is in your first example by putting all your divs on the same line with no spaces or carriage returns.

* {
  margin: 0;
  padding: 0;
}

div.box {
  width: 100px;
  height: 40px;
  background: red;
  display: inline-block;
}

<div tabindex="1" class='box'></div><div class='box'></div><div class='box'></div>

answered May 18, 2018 at 18:51

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Simon Over a year ago

And conversely, if you append a document.createText("\n") between each box, you’ll see the same result as in the HTML.

Matus Dubrava Over a year ago

Thanks both of you, I haven't thought about it like that.

Collectives™ on Stack Overflow

Inconsistent behavior of inline-block elements when created via JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related