How to prevent enter from turning into empty space? - html

Question

This is something that has been bugging me since the first time I learned HTML.
<style>
.test{
display:inline-block;
background-color:#aaa;
padding:5px 10px;
margin:0;
border:0;
}
</style>
<div class="test">Hello</div>
<div class="test">Woooorld</div>
<div class="test">HTML</div>
<div class="test">CSS</div>
I will definitely want to keep the elements in different lines, because else it becomes unreadable. But HTML turns the enters into spaces, which ruins the layout. Float causes a whole array of new problems or simply is not viable for what I am trying to do.
Is there really no better solution than to implement some hacky negative margins for everything except the first element?

Answer 1

Different ways to solve this problem.
link: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
1st Way:
<div class="test">Hello</div><div
class="test">Woooorld</div><div
class="test">HTML</div><div
class="test">CSS</div>
or
<div class="test">Hello</div
><div class="test">Woooorld</div
><div class="test">HTML</div
><div class="test">CSS</div>
2nd Way:
<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>
3rd Way:
use negative margins.
display: inline-block;
margin-right: -4px;
4th way
Skip the closing tag
<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>
5th way
Set the font size to zero for a wrapper div.
6th way
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another.

Answer 2

Just change your HTML slightly:
<div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div>
Demo. As all <div>-s in your current layout are inline-block elements, browsers are treating the whitespace between them as the same-class - inline - elements, allocating some visual space for them.

Answer 3

I would prefer to let the elements float instead of changing the HTML. CSS is for displaying.
Working:
<style>
.test{
display:inline-block;
float: left;
width:50px;
height:50px;
background-color:#aaa;
}
</style>
HTML:
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>

Answer 4

My own solution is to have on-the-fly HTML minification through the PHP script - it strips all newlines and tabs from the HTML source before sending it to the browser (unless said whitespace is inside an element that renders whitespace literally, such as a textarea or any element with white-space:pre-wrap or similar)

Answer 5

Also should work...
<div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div>

Answer 6

Wrap your divs inside a container div and set the container font-size:0;, then set the child divs font-size:14pt for example, This solves your issue.
And here is a working fiddle