display：inline-block extra margin [英] display: inline-block extra margin

问题描述

我正在使用一些 div ，设置为 display：inline-block 设置 height 和 width 。在HTML中，如果每个 div 后有一个换行符，则在div的右侧和底部添加一个自动的5px边框。

示例：

 < div& ; 
< div>一些文本< / div> 
  

有没有一个我忽略的属性，将允许我重置自动保证金？ p>

更新

从我发现的地方， ...除非你有一切都在同一行，或添加注释注释掉换行符。例如：

 < div>部分文字< / div><！ -  
  - >< ; div>一些文本< / div> 
  

不是最好的解决方案，但如果您有多行，更容易阅读。

解决方案

div被视为内联元素。正如两个跨度之间的空间或换行将产生一个间隙，它在内联块之间。您可以给它们一个负边距，或在周围容器上设置 word-spacing：-1; 。

I'm working with a few divs that are set to display: inline-block and have a set height and width. In the HTML, if there is a line break after each div there is an automatic 5px margin add to the right and bottom of the div.

Example:

<div>Some Text</div>
<div>Some Text</div>

Is there a property that I've overlooked that will allow me to reset the automatic margin?

Update

From what I've found there is no way to remove the margin... except if you either have everything on the same line or, add comments to comment out the line breaks. example:

<div>Some Text</div><!--
--><div>Some Text</div>

Not the best solution, but still easier to read if you have multiple lines.

解决方案

The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.

这篇关于display：inline-block extra margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！