How to prevent the transition from empty space?

Question

This is what listened to me 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 definitely want to keep the elements in different lines, because otherwise it will become unreadable. But HTML turns incoming into spaces, which destroys the layout. Float is causing a whole series of new problems or is simply not viable for what I'm trying to do.

Is there a better solution than implementing some hacker negative fields 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>

The second way:

<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>

:   .

  display: inline-block;
  margin-right: -4px;

4-   

<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>

5-    div.

6- , , , .

Answer 2

HTML:

<div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div>

. <div> -s inline-block, - inline -, - .

Answer 3

, HTML. CSS .

:

<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

, HTML- PHP script - HTML, ( , , white-space:pre-wrap )

Answer 5

...

<div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div>

Answer 6

div div font-size:0;, divs font-size:14pt, , .

fiddle