how this margin comes

Question

When I used semantic ui button, there is margin comes between button. But when I copied into my site that margin lost.

enter image description here

I added this jsfiddle

The .ui.button css are given below .. in it margin: 0em;

.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  outline: none;
  border: none;
  background-color: #EBEBEB;
  color: #808080;
  margin: 0em;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  -webkit-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em -0.2rem 0em rgba(0, 0, 0, 0.1) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

But in my site there is no margin. I would like to semantic-ui creates the margin ?

now I understood .. that is not a margin .. and its a `space` .. thanks for answers :) — rab, Oct 25 '13 at 09:41

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

This is how display: inline-block; works. There are some workarounds you can find:

edited May 23 '17 at 11:50

Community

1
1

answered Oct 25 '13 at 09:15

Mihey Egoroff

1,542
14
23

score 1 · Answer 2 · answered Oct 25 '13 at 09:14

1

having display: inline-block; will show margin 4 pixels by default so you can use float: left instead or use margin-right: -4px; if you want to use inline-block.

Or use font-size: 0; as @Mr.Alien commented.....

answered Oct 25 '13 at 09:14

Bhojendra Rauniyar

83,432
35
168
231

`margin-right: -4px;` is not a good practice, it will spoil the layout if browser font size is set higher than `16px`, consider using `font-size: 0;` on the parent element, and than set the font size again for the child elements – Mr. Alien Oct 25 '13 at 09:17

score 1 · Answer 3 · answered Oct 25 '13 at 09:17

1

It is just because you have written

<div class="positive ui button">Positive Button</div>

and

<div class="negative ui button">Negative Button</div>

on different lines.

If you write these on same line, extra space will not appear. i.e.

<div class="positive ui button">Positive Button</div><div class="negative ui button">Negative Button</div>

Here is the fiddle.

answered Oct 25 '13 at 09:17

codingrose

15,563
11
39
58

This happens because of the `white-space` and hence, writing all the `inline-block` elements in one line will help you get rid of the white space – Mr. Alien Oct 25 '13 at 09:18

score 1 · Answer 4 · answered Oct 25 '13 at 09:17

It's not a margin. It's a space. It's exactly the same as what makes each of the letters in this text separate.

To fix, simply remove the space between your two elements, like so:

<div class="positive ui button">Positive Button</div><div class="negative ui button">Negative Button</div>

MAGIC!

score 1 · Answer 5 · answered Oct 25 '13 at 09:38

1

Another way to lose that empty space is to add:

.example {
    font-size: 0;
}

But be careful if you have some text inside.

answered Oct 25 '13 at 09:38

Vladislav Stanic

795
8
13

how this margin comes

5 Answers5