是什么导致了这个随机的空白？答案

【问题标题】：What is causing this random white space?是什么导致了这个随机的空白？
【发布时间】：2013-12-12 17:49:42
【问题描述】：

我最终在我的一个设计中将某些 div 的显示属性分别设置为 table/table-cell，以利用垂直对齐文本支持。但是，我现在有一些空白，我很难理解。

我的代码（JsFiddle：http://jsfiddle.net/p8zw2/）：

HTML

<div class="container">
    <p>Test</p>
    <div class="mytable">
        <div class="tablecell">test</div>
        <div class="tablecell">test</div>
        <div class="tablecell">test</div>
    </div>
    <p>Test</p> </div>
</div>

CSS

.container { width: 100%; background-color: #ff0000; }

.mytable { display: table; background-color: #4d4d4d; width: 94%; padding-left: 3%; padding-right: 3%; }

.tablecell { display: table-cell; width: 33%; }

正如您将在 jsfiddle 中看到的那样，红色背景现在在不应该出现的右侧边缘泄漏。 'mytable' 的 div 填充是每边 3%（总共 6%），因此将宽度设置为 94% 应该确保它填满容器。

将显示属性设置回“块”使其按预期工作，但随后我失去了垂直对齐功能 - 因此这证明它以某种方式归结为表格显示模式。

我已经尝试了各种方式来禁用可能导致它的所有其他填充、边距和边框，但都失败了。 Firebug/Chrome 开发工具没有进一步说明这个问题。

我不是在寻找解决方法（例如用于垂直对齐文本的行高等，我想尝试找出这个特定代码的问题）。

我是否遗漏了一些明显的/任何想法？

【问题讨论】：

标签： html css whitespace css-tables

【解决方案1】：

将body的Margins重置为0px，然后需要将.mytable类中的padding-left和padding-right去掉，直接添加到.tablecell中，最后将mytable的宽度设置为100%。修改CSS如下；

 .container { width: 100%; background-color: #ff0000; }

 .mytable { display: table; background-color: #4d4d4d; width: 100%;  }

 .tablecell { 
   display: table-cell; width: 33%;
   padding-left: 4%;
   padding-right: 4%;
  }

 body{

margin:0 auto;
padding:0;
 }

Jsfiddle example

【讨论】：

【解决方案2】：

*{margin:0;padding:0;}

在你的 style.css 文件顶部添加这些代码行，它会解决你的问题这是跨浏览器的解决方案，这叫做 css reset 看看here 了解详情

【讨论】：

【解决方案3】：

我已更新您的小提琴以使用 border-collapse:collapse。您需要阅读更多关于表格填充的信息（无意冒犯，只是想了解如何使用display:table 和display:table-cell）。这是http://jsfiddle.net/p8zw2/3/。您需要为第一个和第三个单元格内容添加填充。

【讨论】：

【解决方案4】：

您的 div 现在表现得像一个表格：您不能放置填充，默认情况下，单元格彼此“间隔”。这就是为什么宽度为 94% 的 div 看起来更多的原因。

您需要使边框折叠并将您的 div 的宽度设置为 100%。

.mytable { display: table; background-color: #4d4d4d; width: 100%; border-collapse: collapse; }

它应该可以工作。

【讨论】：

【解决方案5】：

大多数浏览器都为 body 元素设置了默认边距。取决于浏览器。有些只是填充，有些只是身体的边缘。

你可以试试这个，

*{    
    margin:0;
    padding:0;
 }

演示： http://jsfiddle.net/p8zw2/5/

body{    
    margin:0;
    padding:0;
 }

演示： http://jsfiddle.net/p8zw2/2/

【讨论】：

【解决方案6】：

.tablecell{width:33%} 导致问题。

33% * 3 = 99%，1% 是差距。

我给.container 设置了灰色背景而不是.mytable，给p 设置了红色背景。

试试：

.container{width:100%;background-color:#4d4d4d;}
.mytable{display:table;width:94%;padding-left:3%;padding-right:3%;}
p{background-color:#f00;margin:0;padding:10px 0;}

Updated fiddle here.

【讨论】：