How do I remove extra margin space generated by inline blocks? [duplicate]

Answer 1

The elements with attribute inline-block will behave as if they are inline (hence the name), and therefore any whitespace encountered will be treated as a space. For example:

will be rendered differently to

See a live example here

You can solve this problem using HTML as follows:

Either place all your elements on the same line, i.e.

    // CONTENT

    // CONTENT

    // CONTENT

or use HTML comments to remove the spaces

    //CONTENT

    //CONTENT

You can solve this problem using CSS as follows:

Set the attribute font-size: 0 on the parent, i.e.

parent {
    display: inline-block;
    font-size: 0
}
parent * {
    font-size: 12px
}

or set the attribute zoom: 1 on the parent, i.e.

parent {
    display: inline-block;
    zoom: 1
}