Geek Answers Handbook

How to make HTML layout white agnostic?

EDIT: There is almost the same question. Removing spaces between HTML elements when using line breaks , however, apart from the "float" clause, I do not find any of the answers that fit my requirements. I would like it to remain open to more innovative offers.

If you have a consistent inline-block white space becomes significant. It adds some level of space between the elements. What is the “right” way to avoid the white space effect in the HTML layout if you want these blocks to look at each other?

Example:

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

It looks different:

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

because of the space between them. I want the whitespace effect to disappear without disrupting the layout of the HTML source. I want my HTML templates to stay clean and indented.

I think these options are ugly:

1) Fine-tuning text-indent , margin , padding , etc. (because it will depend on the font size, default white space width, etc.)

2) Putting just one line, next to each other.

3) Zero font-size . This will require overriding the font size in blocks that would otherwise be inherited.

4) Possible solutions for the entire document. I want the solution to remain local to a specific HTML block.

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

+6
html css
source share
4 answers

You should not use the version without spaces between elements, just do everything with space. You will probably need to set the inline elements in display:block to achieve the correct layout.

Look at this similar question of mine in which there are good answers.

Edit:. One answer to this question suggests using HTML comments as a last resort, for example:

 <span>a</span><!-- --><span>b</span>
+2
source share

if your problem is with redundant spaces or individual units / using "ul" with the appropriate css, you can do your job /

of course 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
source share

You can 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

+1
source share

I had the same issue with a recent plugin that I was developing. Since I used inline-block , and since the plugin required absolutely zero space between elements, and I never knew what elements could be, I had to come up with a solution that did not require user intervention.

Here:

 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 problem. I pull HTML data using jQuery and then run it through this function to clear it.

0
source share

More articles:


All Articles