CODEWITHSUNDEEP
javascriptcss
rab
rab

Reputation: 4144

how this margin comes

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 ?

Upvotes: 1

Views: 280

Answers (5)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

Another way to lose that empty space is to add:

.example {
    font-size: 0;
}

But be careful if you have some text inside.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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!

Upvotes: 1

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 1

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

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

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.....

Upvotes: 1

Related Questions