6

EDIT: There is the almost same question at Removing whitespace between HTML elements when using line breaks , however apart from "float" suggestion I find none of the answers suitable for my requirements. I'd like this to stay open for more innovative suggestions

If you have consecutive inline-blocks white-space becomes significant. It adds some level of space between elements. What's the "correct" way of avoiding whitespace effect to HTML layout if you want those blocks to look stuck to each other?

Example:

<span>a</span>
<span>b</span>

This renders differently than:

<span>a</span><span>b</span>

because of the space inbetween. I want whitespace-effect to go away without compromising HTML source code layout. I want my HTML templates to stay clean and well-indented.

I think these options are ugly:

1) Tweaking text-indent, margin, padding etc. (Because it would be dependent on font-size, default white-space width etc)

2) Putting everything on a single line, next to each other.

3) Zero font-size. That would require overriding font-size in blocks, which would otherwise be inherited.

4) Possible document-wide solutions. I want the solution to stay local for a certain block of HTML.

Any ideas, any obvious points which I'm missing?

4 Answers 4

2

You shouldn't use the version with no space in between elements, just make everything work with space. You'll probably need to set inline elements to display:block to achieve the correct layout.

Have a look at this similar question of mine, which has some good answers.

Edit: One of the answers on the above question suggests using HTML comments as a last resort, e.g.:

<span>a</span><!--
--><span>b</span>
2
  • How do you do it with blocks without specifying absolute values and with whitespaces? Apr 7, 2010 at 21:33
  • Oh couldn't find the other question, thanks for the link. It seems like float is the established way of doing it. Apr 7, 2010 at 21:39
1

if your problem is the redundant white spaces or detached divisions/ using "ul" with appropriate css can do your job/

ofcourse there is reset.css/

html :

<ul id="uList">
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
<li><img src="#" alt="img"/></li>
</ul>

css :

ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}
1
  • 1
    This isn't related to UL's or LI's. It's actually "float" that fixes the problem here. (see the other question) Apr 8, 2010 at 8:03
1

You could also use word-spacing:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Inline-blocks without whitespace between</title>
<style>
html,
body
    {
        background:     #fff;
        padding:        0;
        margin:         0;
    }
p
    {
        background:     #9ab;
        text-align:     center;
        margin:         50px;
        padding:        0 20px;

        word-spacing:   -.3em;
    }
span
    {
        display:        inline-block;
        padding:        3px;
        color:          #def;
        background:     #678;
        word-spacing:   normal;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    /**
     * Since WebKit fails on word-spacing for
     * inline-block … we have to hack.
     */
    span
        {
            margin:         0 -.2em;
        }
}
</style>

<p>
    <span>Inline-block<br>number 1</span>
    <span>Inline-block<br>number 2</span>
    <span>Inline-block<br>number 3</span>
</p>

Live demo

2
  • This is good but doesn't seem much different than specifying margin's/padding's/indent's. What does "-.3em" signify? And what will it signify when I change the font used in the block? Apr 8, 2010 at 17:26
  • .3em is the space web browsers usually take for a normal white space. You may take for the inline blocks any font you wish – the word-spacing is computed from the p’s font. The main difference to margin or text-indent is visible when the inline blocks collide with the edge of their parent element: a negative margin pushes them out of the parent box. And padding cannot solve your problem anyway.
    – fuxia
    Apr 8, 2010 at 19:04
0

I had this same problem with a recent plugin I was developing. Since I was utilizing inline-block, and since the plugin required absolutely zero space between elements, and I didn't ever know what the elements might be, I had to come up with a solution that required no user intervention.

Behold:

function removeWhiteSpace(raw) {
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, "");
    return cleaned_string;
}

Javascript seems to be the only real solution to the issue. I pull the HTML data out using jQuery, and then run it through this function to clean it up.

1
  • I would refrain from going for that because JavaScript DOM manipulation is very expensive (triggers DOM updates, layout calculation and repainting), especially on mobile devices. Float worked fine in my case. Apr 14, 2016 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.