Html CSS问题，元素之间的空间没有意义

我有一个奇怪的空间在两个元素上，它没有任何意义！左侧的

ul

边框与右侧的

div

边框之间不应有白色间隙。蓝色部分应该接触，加载页面，它将有意义

这是该部分的HTML：

<div class="messages">
    <ul class="messageList">
        <li style="background-color:#2e89e6;color:#FFF;">
            <div>Martyn Ball</div>
            <p>This is a brief mess...</p>
            <span>07/12/2015</span>
        </li>
        <li>
            <div>Martyn Ball</div>
            <p>This is a brief mess...</p>
            <span>07/12/2015</span>
        </li>
        <li>
            <div>Martyn Ball</div>
            <p>This is a brief mess...</p>
            <span>07/12/2015</span>
        </li>
    </ul>
    <div class="messageContent">
        <div class="messageContentTitle">
            <span class="name">Martyn Ball</span>
            <span class="date">07/12/2015 02:24PM</span>
        </div>
        This is a brief message, more will be loaded here!
    </div>
</div>

---

这是因为

div

和

ul

都是

内联块

元素，这意味着它们显示中间的空白

这是我最喜欢的解决这个问题的方法。将父元素的

font size

设置为0，然后将内联块元素的

font size

设置为您需要的大小[我使用

rem

s设置它，但您可以在项目中使用您需要的任何单位]

.messages {
  font-size: 0;
}

.messageList, .messageContent {
  font-size: 1rem;
}

其他选项是注释掉元素之间的空白

<div class="messages">
    <ul class="messageList">
        ...
    </ul><!--
    --><div class="messageContent">
        ...
    </div>
</div>

...

...

或者，完全删除所有空白

<div class="messages">
    <ul class="messageList">
        ...
    </ul><div class="messageContent">
        ...
    </div>
</div>

...

...

---

与其他解决方案相比，我更喜欢第一个解决方案，因为它使HTML更具可读性。

这两个元素是

内联块。看到这个答案：谢谢，这个问题解决了！
<div class="messages">
    <ul class="messageList">
        ...
    </ul><div class="messageContent">
        ...
    </div>
</div>