未知的空間，而不是邊距和填充

即使邊距和填充設置爲0時出現的html元素之間的間隔是多少，我該如何擺脫它？未知的空間，而不是邊距和填充

運行下面的代碼片段，並注意要素之間的空間：

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.button-label, .tab-label { 
 
    display:inline-block; 
 
    background: #eee; 
 
    border: 1px solid; 
 
} 
 
[name="tab-group-1"] { 
 
    display: none; 
 
}

Example 1: 
 
<div class="button-container"> 
 
     <button class="button-label">Button One</button> 
 
     <button class="button-label">Button Two</button> 
 
     <button class="button-label">Button Three</button> 
 
</div> 
 
Example 2: 
 
<div class="radio-container"> 
 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
 
     <label class="tab-label" for="tab-1">Tab One</label> 
 
     <input type="radio" id="tab-2" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-2">Tab Two</label> 
 
     <input type="radio" id="tab-3" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-3">Tab Three</label> 
 
</div>

來源

2017-03-06 Damian Green

這裏的一個['良好read']（https://css-tricks.com/fighting如果你有興趣的話，就可以在這個主題上找到內嵌塊元素/）。爲其提供多種解決方案。我推薦'flexbox'。 –

謝謝。我通常會使用flexbox，但我正在努力創建一個挑戰，我試圖創建一個響應式選項卡容器，可以降低手風琴的音量（不使用定位），並且只使用html和css（無JS），並且我可以找到唯一的方法要做到這一點是把輸入和內容放在彼此相鄰的父div下面。如果我要將輸入按鈕封裝在另一個div中，以便我可以將其設置爲flexbox，那麼我將無法引用'＃button-1：focus〜＃content-1 {display：「flex」}'到展示內容。如果我在父級上使用flex，則內容將像按鈕一樣對待。 –

好吧，既然你提到'響應'，你應該注意'font-size：0'對移動設備來說真的很糟糕，但是你有很多其他的選擇可供選擇。快樂的編碼！ –

空間可能很難最初診斷，因爲它不是由瀏覽器檢查人員強調，但一旦你知道它是你的html標籤之間的空白（換行符）的結果，那麼處理這個問題很簡單。你有幾個選項之一刪除空間，包括以下內容：

要麼，刪除你的HTML你的標籤之間的空白。（不幸的是，這使得你的html更混亂，所以第二種選擇可能會更好。）
或者，在你的CSS中，將父容器中的字體大小設置爲0px（例如：#parent{font-size:0px;}），然後再次初始化父母的所有孩子（有類似#parent *{font-size:initial;}）。注意：這個解決方案可能需要你再次指定一些子字體大小，如果它們已經在你的css流中更早的修改過。

下面是一個例子：（注意空間已被移除）

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#button-container, #radio-container{ 
 
    font-size:0px; 
 
    display:block; 
 
} 
 
#button-container *, #radio-container *{ 
 
    font-size:initial; 
 
} 
 
.button-label, .tab-label { 
 
    display:inline-block; 
 
    background: #eee; 
 
    border: 1px solid; 
 
} 
 
[name="tab-group-1"] { 
 
    display: none; 
 
}

Example 1: 
 
<div id="button-container"> 
 
     <button class="button-label">Button One</button> 
 
     <button class="button-label">Button Two</button> 
 
     <button class="button-label">Button Three</button> 
 
</div> 
 
Example 2: 
 
<div id="radio-container"> 
 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
 
     <label class="tab-label" for="tab-1">Tab One</label> 
 
     <input type="radio" id="tab-2" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-2">Tab Two</label> 
 
     <input type="radio" id="tab-3" name="tab-group-1"> 
 
     <label class="tab-label" for="tab-3">Tab Three</label> 
 
</div>

來源

2017-03-06 03:10:06

未知的空間，而不是邊距和填充

回答

相關問題