如何删除embedded块生成的额外空白空间？

我正在使用这个CSS来格式化两列，但我仍然有两个之间的空间。 我可以使用margin-left: -4px;来消除它margin-left: -4px; 或者一些这样的。 有没有一个更优雅的方式来做到这一点，或者有什么问题的CSS代码？

 div.col1{ display: inline-block; min-height: 900px; height: 100%; width 300px; margin: 0px; background-color: #272727; overflow: hidden; border: 1px dotted red; } div.col2{ display: inline-block; min-height: 900px; height: 100%; width: 620px; margin: 0px; vertical-align: top; border: 1px dotted red; overflow: hidden; } 

Answer 1

也许你有：

 <div class="col1"> Stuff 1 </div> <div class="col2"> Stuff 2 </div> 

？ 如果是这样，那么这可能是一个空白问题（事实certificate，空白在html中很重要）。 这应该解决它：

 <div class="col1"> Stuff 1 </div><div class="col2"> Stuff 2 </div> 

Answer 2

一个简单的font-size:0到父元素将工作。

Answer 3

具有inline-block属性的元素的行为就像内联（因此是名称），因此遇到的任何空白都将被视为空间。 例如：

 <div></div><div></div> 

将会以不同的方式呈现

 <div></div> <div></div> 

在这里看到一个实例

您可以使用HTML解决此问题，如下所示：

把所有的元素放在同一行上，即

 <div> // CONTENT </div><div> // CONTENT </div><div> // CONTENT </div> 

或使用HTML注释删除空格

 <div> //CONTENT </div><!-- --><div> //CONTENT </div> 

你可以使用CSS来解决这个问题，如下所示：

在父级上设置属性font-size: 0 ，即

 parent { display: inline-block; font-size: 0 } parent * { font-size: 12px } 

或者在父级上设置属性zoom: 1 ，即

 parent { display: inline-block; zoom: 1 } 

Answer 4

另外，为了解决这个问题而不改变源代码的格式，你可以创build一个额外的元素。

如果你在列表中这样做，它会看起来像：

 <ul > <li> <a href="#">Solutions Overview</a> </li> </ul> <style type="text/css"> ul {word-spacing:-1em;} ul li a{word-spacing:0;} </style> 

Answer 5

另外，可以在这里列出一些有用的技术：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 6

应用浮动：左侧，这将删除空间，所以文本不必在1行。

Answer 7

使父元素的font-size: 0也将解决这个问题。

 <div class="col-set"> <div class="col1"> Stuff 1 </div> <div class="col2"> Stuff 2 </div> </div> 

 .col-set { font-size: 0; } .col-set > div { font-size: 12px; } 

Answer 8

你还应该指定：

 padding: 0;