bsr bsr - 4 months ago 11
CSS Question

what is giving margin between the elements in this form

please see the example
http://v4-alpha.getbootstrap.com/components/forms/#inline-forms

I fail to see what is causing the gap between the

form-group
and the button, and also between the
form-group
s. When I use bootstrap 4 with
flexbox
enabled, all my elements (inputs and button) collapses without any margin between them.

How can see what is causing the
form-group
highlighted and the button next to it? I could not find it through chrome inspector.

thanks.

enter image description here

Answer

This is kind of a tricky thing, but it has to do with the fact that the two DIVS are set as display:inline-block which means they are part of an inline formatting context, and each div almost behaves as if it's a word in a sentence. We want spaces between words to render, so the html is very subtly hinting that the space in the html should be rendered as a space. In chrome inspector, the way it formats the elements tree hides this from you, but if you edit the html on the parent element within chrome inspector and remove the space you can recreate what you are seeing in my codepen example.

Here is a code pen, to demonstrate: http://codepen.io/MarkAtRamp51/pen/XKYNpZ

Notice the difference between the two:

Excerpt from HTML that displays whitespaces between the two form groups

<input type="text" class="form-control" id="exampleInputName2"
placeholder="Jane Doe">   </div>   
<div class="form-group">
     <label for="exampleInputEmail2">Email</label>

and

<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div><div class="form-group">
    <label for="exampleInputEmail2">Email</label>

Notice in the second example the two DIV's are butted up next to each other.

You can find more information about this here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ and https://www.w3.org/TR/CSS2/visuren.html