2

I'm developing a Meteor app with Bootstrap 3 package already installed and trying in making a buttons navigation.

I've noticed that buttons have space in between but, even if i've inspected, i was not able to discover any margin style property to make it possible.

How is that possible? Where did these margins come from?

You can see and inspect the buttons even in the official Bootstrap 3 Doc http://getbootstrap.com/css/#buttons

Roberto Cinetto
  • 90
  • 10

2 Answers2

1

It's not margin, it's actual spaces in the HTML.

If you place the buttons on a single line in your code there won't be any spacing.

See this bootply demo for an example of buttons with no spacing. Also refer to this question How to remove the space between inline-block elements? for more information.

Community
  • 1
  • 1
Dan
  • 9,391
  • 5
  • 41
  • 73
  • It's NOT spaces in the HTML, it's due to the property "display: inline-block" having space around it by nature. Removing any space in your HTML is a work-around for this. See: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ You can also change the display:inline-block to floats instead which would remove that space. – kretzm Sep 17 '14 at 14:12
  • 1
    @kretzm It is the spaces in the HTML. As the link that you provided says: `The reason you get the spaces is because, well, you have spaces between the elements`. The spaces are displayed because of the `inline-block` CSS. – Dan Sep 17 '14 at 14:14
  • Yes, but that is only due to the use of the CSS property "display:inline-block", not the actual HTML. If you were to use floats, then there would be no spaces regardless of how much space is in your HTML. I don't like this solution because it requires you to modify your HTML when that should have no relevance, it's a CSS issue. – kretzm Sep 17 '14 at 14:23
  • @kretzm ok fair enough - you are welcome to post your own answer too. The link you posted seems helpful. However OP asked "Where did these margins come from?" not "how do I fix this issue?". I was answering his question. – Dan Sep 17 '14 at 14:26
  • Well, i don't know if i can take this answer as the best, but now i know how to face the problem and for me all yours comments gave me the right vision of this issue. Thank you very much – Roberto Cinetto Sep 17 '14 at 14:32
1

The issue comes from the CSS property display:inline block which forces white-space between inline elements. It is not an HTML specific issue. See this post from CSS-Tricks for more information: http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

A workaround fix is to modify the HTML, which @Dan posted, but this forces you to break standard HTML formatting and a developer down the road could space things out and break your solution.

A few CSS fixes are to use floats instead of display:inline-block. You can also add negative margins on your buttons to remove that space.

kretzm
  • 762
  • 1
  • 7
  • 14
  • 2
    It's semantics, but I disagree with your comment `It is not an HTML issue`. Yes, it is an HTML issue and it's also a CSS issue. It could be fixed by changing HTML or CSS or using javascript for that matter. There are probably hundreds of potential fixes. At the end of the day it is both an HTML issue and a CSS issue. Separately, your comment that `display:inline-block` naturally has space around it does not make sense - what does that mean? – Dan Sep 17 '14 at 15:32
  • @Dan just because it can be resolved in HTML or JavaScript, does not make it an issue with those languages. The limiting factor is the CSS property `display:inline-block`. The space comes from applying an "inline" style to the elements, which as the article says, has a space between them by default - most likely for legibility between forced inline elements. The HTML itself does not contain any stylistic properties. If you were to use span tags instead of divs, which are naturally inline, and no CSS, you wouldn't have that space. – kretzm Sep 17 '14 at 16:02
  • The article doesn't say there is a space in between them by default. This question may help as well [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Dan Sep 17 '14 at 16:57