Raw HTML styling differently from jQuery generated HTML with same structure

Question

I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.

I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.

When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.

/* I only need this for raw html, and I have no idea why!
   Not even idea why I would need this for anything!
   I don't need them for dynamic tabs... */

.tabs .tab [type="radio"]:checked + .tab-label {
  margin-right: -6px;
}

.tabs .tab [type="radio"]:not(:checked) + .tab-label {
  margin-right: -10px;
}

I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.

Can anyone see the problem? :(

Answer 1

Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:

.tabs .tab {
  display: inline;
  font-size: 0;/*set font size to 0*/
}

.tabs .tab-label {
    background-color: rgba(255, 0, 0, 0.3);
    font-size: 16px;/*set desire font size*/
    display: inline-block;
    padding: 7px;
    margin: 1px;
    position: relative;
    vertical-align: bottom;
    border-right: 1px solid #ddd;
}

Also a fiddle