Where does Bootstrap inline form gap between label and input element come from?

Question

I noticed something that I could not understand.

https://getbootstrap.com/docs/3.4/css/#forms-inline

Where is the this gap between the 'label' and the 'input' coming from?

Both of them are inline. Are they supposed to attach each other?

I actually copy the code into my project. They are attached to each other. But my project is messy. I want to understand why on the bootstrap website, they are not attached.

They are 'inline-block'. In their 'Computed' tab, the margin is '-'. So zero. Right?

Where is this margin coming from?

No bootstrap 3. I think it seems to me that the 'inline-block' automatically inject a unseeable 'whitespace' charactor before and after itself right before render itself. This is just how I feel. — Hao, Jul 31 '19 at 06:31
You're Right, I've tested it locally, this space is automatically generated from `inline-block` property, — Kareem Dabbeet, Jul 31 '19 at 06:33
thanks. that explains. my project is angular and it erased all whitespace after compile — Hao, Jul 31 '19 at 06:33
you can read more about inline-block and how you can remove the space. https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Sumit Patel, Jul 31 '19 at 06:37

score 1 · Accepted Answer · answered Jul 31 '19 at 06:38

This space is coming from inline-block property, it's adding some space between elements which is inlined by default,

See This Example with no libraries added

 div { 
      display: inline-block;
      font-size: 2rem;
    }
    div:nth-child(odd) { 
      background-color: lightblue
    }
    div:nth-child(even) { 
      background-color: lightcoral;
    }

    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>

score 0 · Answer 2 · edited Jul 31 '19 at 06:41

From CSS-Tricks.com:

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

Where does Bootstrap inline form gap between label and input element come from?

2 Answers2