是什么导致此随机空白？

Anonymous 发表于 Dev

匿名

我最终将我的一种设计中某些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％应该确保它填充了容器。

将display属性设置回'block'使其可以按我期望的那样工作，但是随后我失去了垂直对齐功能-因此这证明它以一种或另一种方式归结于表格显示模式。

我已经尝试过各种方式来禁用可能导致它出现但失败的所有其他填充，边距和边框。Firebug / Chrome开发者工具在这个问题上再也没有阐明。

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

我是否错过了一些显而易见的想法？

码

复位机构的边距为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示例

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。