Inline-block Elements Not Lining Up

February 28, 2023 Post a Comment

I have some HTML that looks a bit like this:

Heading 1

Some rows and data cells<

Solution 1:

Use vertical-align: top; also remove white-space between inline elements, so there will be no gaps between blocks.

.wrapper {
    display: inline-block;
    vertical-align: top;
}

    <div class='wrapper'>
    <h2>Heading 1</h2>
    <table>
    <tr><td>Some rows and data cells</td></tr>
    </table>
  
    <h2>Heading 2</h2>
    <table>
    <tr><td>Some more rows and data cells</td></tr>
    </table>
    </div><!--
    
    --><div class='wrapper'>
    <h2>Heading 3</h2>
    <table>
    <tr><td>Last lot of rows and data cells</td></tr>
    </table>
    </div>

Solution 2:

You can add vertical-align: top; to the divs.

Html5 Forum

Inline-block Elements Not Lining Up

Heading 1

Solution 1:

Solution 2:

Post a Comment for "Inline-block Elements Not Lining Up"