Question

我最终将我的一个设计中的某些div的显示属性分别设置为table / table-cell，以利用vertical-align文本支持。但是，我现在有一些我正在努力理解的空白区域。

我的代码（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开发工具对这个问题没有任何了解。

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

我是否错过了一些明显的/任何想法？

Answer 1

将正文的边距重置为0px，然后您需要从padding-left类中移除padding-right和.mytable并将其直接添加到.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

Answer 2

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

你能试试吗，

*{    
    margin:0;
    padding:0;
 }

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

body{    
    margin:0;
    padding:0;
 }

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

Answer 3

*{margin:0;padding:0;}

在style.css文件的顶部添加这些代码行，它将解决您的问题，这是跨浏览器解决方案，这称为 css reset 查看详细信息here

Answer 4

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

Answer 5

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

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

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

它应该有用。

Answer 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.

造成这个随机空白的原因是什么？

HTML

CSS

6 个答案: