未知的空间，而不是边距和填充

即使边距和填充设置为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

未知的空间，而不是边距和填充

回答

相关问题