這個邊緣如何來

當我使用語義用戶界面按鈕，按鈕之間有餘量。但是，當我複製到我的網站，保證金失去。這個邊緣如何來

enter image description here

我加入這個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創建保證金？

來源

2013-10-25 rab

現在我明白了..這不是一個邊緣..和它的'空間'..謝謝你的答案:) – rab

這是怎麼display: inline-block;作品。有一些解決方法，你可以找到：

來源

2013-10-25 09:15:12

具有display: inline-block;將默認顯示邊距4像素，因此如果要使用內嵌塊，則可以使用float: left，或者使用margin-right: -4px;。

或者使用font-size: 0;爲@ Mr.Alien評論.....

來源

2013-10-25 09:14:06

在我的網站其內嵌塊，沒有'浮動'增加.. – rab

'margin-right：-4px;'不是一個好習慣，如果瀏覽器字體大小設置爲大於16px，則會損壞佈局，請考慮在父元素上使用'font-size：0;'，並且爲子元素再次設置字體大小 –

這僅僅是因爲你已經寫

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

來源

2013-10-25 09:17:17 Hiral

發生這種情況是因爲「空白」，因此，將所有「inline-block」元素寫入一行將幫助您擺脫空白 –

right @ Mr.Alien – Hiral

這不是利潤率。這是一個空間。這與使本文中的每個字母分開的內容完全相同。

要解決，只需刪除空間的兩個元素之間，就像這樣：

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

MAGIC!

來源

2013-10-25 09:17:35

另一種方式失去的空白就是加：

.example { 
    font-size: 0; 
}

但如果裏面有一些文字，請小心。

來源

2013-10-25 09:38:14

這個邊緣如何來

回答

相關問題