Question

How can I remove the space between the <fieldset>‘s in the following example? Here’s a JSFiddle.

HTML

<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>

<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>

CSS

*
{
    margin: 0;
    padding: 0;
}

fieldset
{
    background-color: red;
    display: inline-block;
}

I’d like to be able to leave space between the <fieldset>‘s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.

Answer 1

The best solution is to remove any spaces between inline-block (or inline) tags.

You can use comments for better readability:

<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>

There is no CSS solution which can be 100% reliable.

EDIT: it doesn’t seem it’s the case but some template engines provide this behaviour, like twig’s spaceless