Q:

How to prevent enter from turning into empty space?

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?

A:

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.

