这个差距是如何来的

Question

当我使用语义ui按钮时，按钮之间有余量。但是当我复制到我的网站时，边缘丢失了。

我添加了 jsfiddle

下面给出了.ui.button css .. 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;
}

但在我的网站上没有保证金。我想semantic-ui创建边距？

Answer 1

这就是display: inline-block;的工作原理。您可以找到一些解决方法：

• http://css-tricks.com/fighting-the-space-between-inline-block-elements/
• display: inline-block extra margin

Answer 2

默认情况下，display: inline-block;会显示4个像素的边距，因此您可以使用float: left代替margin-right: -4px;，如果您想使用内联块，则可以使用font-size: 0;。

或者使用{{1}}作为@ Mr.Alien评论.....

Answer 3

这只是因为你写了

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

和

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

在不同的行上。

如果您在同一行上写下这些内容，则不会显示额外的空格。即。

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

Here is the fiddle.

Answer 4

这不是保证金。这是一个空间。它与本文中每个字母分开的内容完全相同。

要修复，只需删除两个元素之间的空格，如下所示：

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

MAGIC!

Answer 5

失去空白空间的另一种方法是添加：

.example {
    font-size: 0;
}

但如果你有一些文字，请小心。