同一行上的元素不會在按鈕之間出現空格CSS

任何人都可以解釋這種奇怪的行爲，爲什麼在按鈕之間添加了額外的間距。同一行上的元素不會在按鈕之間出現空格CSS

案例 -

以下是如果這樣寫的這是增加在按鍵之間的額外空間的HTML代碼 -

<div class="wrapper"> 
     <button class="btn one">First long button with a long text length</button> 
     <button class="btn two">Second long button with a long text length</button> 
    </div>

輸出 -

但如果我正在寫這樣的話，那麼n O空間來了 -

碼 -

<div class="wrapper"> 
     <button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button> 
    </div>

輸出 -

CSS代碼 -

* { 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    padding: 10px; 
} 

.btn { 
    font-size: 14px; 
    line-height: 28px; 
    background: #FFFFFF; 
    border: 1px solid #C3C3C3; 
    position: relative; 
    padding: 10px; 
    display: inline; 
} 

.btn:before { 
    content: ""; 
    position: absolute; 
    width: 4%; 
    height: 5px; 
    background: #FFF; 
    right: 0px; 
    top: -5px; 
} 

.two { 
    display: inline; 
}

來源

2017-07-21 Nesh

使用內聯元素，換行符（和多個空格）被轉換爲1個空格。

來源

2017-07-21 07:53:48

\ n是html中的一個合法字符，它只是不返回行。例如，您可以通過將font-size：0添加到按鈕的容器中來解決它，因爲按鈕的font-size：14px。

div.wrapper { font-size:0 ; }

只是要小心你的包裝中的其他元素，這將從你的字體大小：0。或者：您可以在同一行寫入...... :)

來源

2017-07-21 07:54:21

爲了消除元素之間的空白，您可以執行以下幾項操作：然而這取決於使用的元素的種類和瀏覽器的HTML渲染引擎。

以下是一些適用於「空白」問題的內容，但請記住最終您希望代碼看起來整潔。

很好的解決：沒有空白&聰明的CSS
沒有白色空間肯定會排序了這一點對於大多數主流瀏覽器，但它使你的代碼難以辨認編碼的HTML。不過，在將代碼提供給瀏覽器之前，您可以通過HTML預處理器（如PHP）和代碼運行代碼。對於速度問題，這可能看起來很「愚蠢」，但是如果你能夠在預處理器中「配置」你的項目，在「開發」模式下將源代碼作爲單獨文件「烘焙」（縮小）並且只在「實時」模式下「服務」縮小的代碼。

如果你喜歡「預處理器」選項，然後看看：how to minify html code

在你的CSS，注意到元素瀏覽器如何不同的渲染。
使用「塊類型」&「視圖端口」元素，將它們包裹在您可以控制的其他元素中;因爲造型這些顯示inline可能會導致問題，因此爲什麼CSS值爲這些：display:inline-block，但它不是100％的保證看起來像預期的。

HTML只：評論&怪異閉角位置：醜，但工程

<button>one</button><!-- 
--><button>two</button> 

<button>one</button 
><button>one</button>

CSS只：對父字體大小爲零，一致&保證金
如果您使用的是font-size:0px那麼你必須聰明與你的CSS選擇器。強制所有元素的標準邊距/填充是一致性的好主意：

body{font-size:0px;} 
p,b,i,a,span{font-size:16px;} 
div,svg{position:relative; box-sizing:border-box; margin:0px;}

來源

2017-07-21 09:13:17 argon

同一行上的元素不會在按鈕之間出現空格CSS

回答

相關問題