inline_block_table.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="./style/reset.css" />
    <link rel="stylesheet" type="text/css" href="./style/main.css" />
    <link rel="stylesheet" type="text/css" href="./style/inline_block_table.css" />
</head>
<body>

<h4 class="bold m-bottom10">Standard behavior:</h4>
<ul class="inline-block-table inline-block border bw3 bc2">
    <li class="img top border bw3 bc1">
        <img class="middle" src="http://lorempixel.com/50/50/" alt="lorempixel.com">
    </li>
    <li class="text1 middle border bw3 bc1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec interdum leo at gravida tristique. Integer egestas iaculis elit,
        in sollicitudin justo. Aenean lacinia nunc et mauris maximus,
        sit amet pellentesque dolor ultricies.
    </li>
    <li class="text2 middle border bw3 bc1">
        Aliquam ac felis magna.
    </li>
</ul>

<h4 class="bold m-top20">Font-size = 0:</h4>
<h6 class="italic m-bottom10 ">(partly supported by Safari, you can use inline-table instead of inline-block)</h6>
<ul class="inline-block-table font-size0 inline-block border bw3 bc2">
    <li class="img top border bw3 bc1">
        <img class="middle" src="http://lorempixel.com/50/50/" alt="lorempixel.com">
    </li>
    <li class="text1 middle border bw3 bc1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec interdum leo at gravida tristique. Integer egestas iaculis elit,
        in sollicitudin justo. Aenean lacinia nunc et mauris maximus,
        sit amet pellentesque dolor ultricies.
    </li>
    <li class="text2 middle border bw3 bc1">
        Aliquam ac felis magna.
    </li>
</ul>

<h4 class="bold m-bottom10 m-top20">Comments:</h4>
<ul class="inline-block-table inline-block border bw3 bc2">
    <li class="img top border bw3 bc1">
        <img class="middle" src="http://lorempixel.com/50/50/" alt="lorempixel.com">
    </li><!--
 --><li class="text1 middle border bw3 bc1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec interdum leo at gravida tristique. Integer egestas iaculis elit,
        in sollicitudin justo. Aenean lacinia nunc et mauris maximus,
        sit amet pellentesque dolor ultricies.
    </li><!--
 --><li class="text2 middle border bw3 bc1">
        Aliquam ac felis magna.
    </li>
</ul>

<h4 class="bold m-bottom10 m-top20">Remove the spaces:</h4>
<ul class="inline-block-table inline-block border bw3 bc2">
    <li class="img top border bw3 bc1">
        <img class="middle" src="http://lorempixel.com/50/50/" alt="lorempixel.com">
    </li><li class="text1 middle border bw3 bc1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec interdum leo at gravida tristique. Integer egestas iaculis elit,
        in sollicitudin justo. Aenean lacinia nunc et mauris maximus,
        sit amet pellentesque dolor ultricies.
    </li><li class="text2 middle border bw3 bc1">
        Aliquam ac felis magna.
    </li>
</ul>

<h4 class="bold m-top20">Negative margin:</h4>
<h6 class="italic m-bottom10 ">(you shouldn't use this, depends on font-size)</h6>
<ul class="inline-block-table negative-margin inline-block border bw3 bc2">
    <li class="img top border bw3 bc1">
        <img class="middle" src="http://lorempixel.com/50/50/" alt="lorempixel.com">
    </li>
    <li class="text1 middle border bw3 bc1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec interdum leo at gravida tristique. Integer egestas iaculis elit,
        in sollicitudin justo. Aenean lacinia nunc et mauris maximus,
        sit amet pellentesque dolor ultricies.
    </li>
    <li class="text2 middle border bw3 bc1">
        Aliquam ac felis magna.
    </li>
</ul>

</body>
</html>