Mysterious whitespace between "inline

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

Solution 1: Add comments:

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

You can write everything on the same line, too, but it looks cleaner with comments.

---

Solution 2: Add font-size:0 to the parent element. Don't forget to define the font-size for child elements:

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}

---

使用浮动

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }

---

The sapces/linebreakes between your inline-block elementes are displayed by the browser. You can remove them, but possible better use some sort of floating on your td class.

I am not sure what kind of data you are trying to display with your markup, but for tabular data the use of tables is perfectly finde! ;)

链接地址: http://www.djcxy.com/p/89274.html

上一篇: 如何去除两个<span>标签之间的空间？

下一篇: “内联”之间的神秘空白