How to make HTML layout whitespace-agnostic?

Question

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?

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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>

edited May 23 '17 at 10:32

Community

1
1

answered Apr 07 '10 at 21:30

Skilldrick

69,215
34
177
229

How do you do it with `block`s without specifying absolute values and with whitespaces? – Sedat Kapanoglu Apr 07 '10 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. – Sedat Kapanoglu Apr 07 '10 at 21:39

score 1 · Answer 2 · answered Apr 08 '10 at 00:15

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;}

answered Apr 08 '10 at 00:15

spielersun

172
6

1

This isn't related to UL's or LI's. It's actually "float" that fixes the problem here. (see the other question) – Sedat Kapanoglu Apr 08 '10 at 08:03

score 1 · Answer 3 · answered Apr 08 '10 at 03:03

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

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? — Sedat Kapanoglu, Apr 08 '10 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 08 '10 at 19:04

score 0 · Answer 4 · answered Apr 07 '10 at 21:31

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.

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. — Sedat Kapanoglu, Apr 14 '16 at 17:17

How to make HTML layout whitespace-agnostic?

4 Answers4