CSS Issue, space between elements makes no sense

Question

I have got a weird space in two elements on this page and it doesn't make any sense! There should be no white gap between the border on the ul on the left, and the div on the right. The blue sections should touch, load the page and it will make sense.

This is the HTML for that part:

<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>

And here is the 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; }

https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — AVAVT, Dec 07 '15 at 17:00
Those two elements are `inline-block`. See this answer: http://stackoverflow.com/a/32801275/3597276 — Michael Benjamin, Dec 07 '15 at 17:01

RyanS · Accepted Answer · 2015-12-07T17:05:23.467

This is because both the div and ul are inline-block elements, which means that they display the whitespace in between.

This is my favorite solution to such an issue. Set the font-size of the parent to 0, and then set the font-size of the inline-block elements to the size that you need [I set it using rems, but you can use whichever unit you need in your project].

.messages {
  font-size: 0;
}

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

The other options are to comment out the whitespace between the elements.

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

Or, to remove all the whitespace, altogether.

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

I prefer the first solution over the others, as it keeps the HTML more readable.

Thanks, this solved the issue! – Martyn Ball Dec 07 '15 at 17:20 — Martyn Ball, Dec 07 '15 at 17:20

CSS Issue, space between elements makes no sense

1 Answers1