Question

我在this page的两个元素中有一个奇怪的空间，它没有任何意义！左侧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>

这是CSS：

/* Messages Styles */
.messageList {
    list-style:none;
    list-style-type:none;
    margin:0; padding:0;
    display:inline-block;
    border:solid #2e89e6;
    border-width:0px 5px 0px 0px;
    width:20%;
}
.messageList li p {
    font-size:14px;
    margin:0px;
}
.messageList li div {
    font-weight:bold;
}
.messageList li span {
    font-size:12px;
}
.messageList li {
    border:solid #e5e5e5;
    border-width:0px 0px 1px 1px;
    padding:8px;
    cursor:pointer;
}
.messageList li:hover {
    background-color:#2e89e6;
    color:#FFF;
}
.messageContent {
    vertical-align:top;
    overflow: hidden;
    display:inline-block;
    text-align:left;
    width:75%;
}
.messageContentTitle {
    color:#FFF;
    background-color:#2e89e6;
    margin:0;
    padding:5px;
    width:100%;
}
.messageContentTitle name { float:left; }
.messageContentTitle date { float:right; }

Answer 1

这是因为div和ul都是inline-block元素，这意味着它们会在两者之间显示空格。

这是我最喜欢的解决方案。将父级的font-size设置为0，然后将内联块元素的font-size设置为您需要的大小[我使用rem设置它，但您可以使用您项目中需要的任何单位]。

.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更具可读性。

CSS问题，元素之间的空间毫无意义

1 个答案: