Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Inline-block Elements Not Lining Up

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;
}
<divclass='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><!--
    
    --><divclass='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.

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

Menu Halaman Statis

© 2022 - Html5 News