Question

即使边距和填充设置为0，html元素之间的间距是多少，我该怎样摆脱它？

运行以下代码段并注意元素之间的空格：

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 1

这个空间最初很难诊断，因为它没有被浏览器检查员突出显示，但是一旦你知道它是你的html标签之间的html中的空格（换行符）的结果，那么处理问题很简单。您可以使用以下几种方法之一删除空格，包括：

或者，删除html中代码之间的空白区域。（不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。）
或者，在您的css中，将父容器中的font-size设置为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>

未知空间，不是边距也不是填充

1 个答案: