Vertical alignment of inline elements and remove space between from inline-block elements

Question

I have made some problem to solve. For example, I have two blocks with constant width and display: inline-block ( http://jsfiddle.net/mgs8jLwk/ ). How can I force left one to stay at top? Sorry if it is duplicate of some question.

PS Is there any way to make two or more columns without commenting spaces in html markup?

Answer 1

Add vertical-align: top to your CSS rule for #one :

#one
{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    vertical-align: top;
}

http://jsfiddle.net/mgs8jLwk/1/

Answer 2

You can float them both left:

#one, #two {
    float:left;
}

jsFiddle example

Answer 3

For Question 1 - Make Blocks Align Top:

Use " vertical-align:top; " for " #one " div.

#one {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    vertical-align:top; /*FIX ADDED*/
}

For Question 2 - Alternate of <!-- COMMENT--> to Remove Space Between DIVS :

Add " font-size:0; " to the parent element:

#wrapper {
    margin: auto;
    width: 300px;
    font-size:0;
}

Here are few more options to get rid of the space between inline-block elements: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Working Demo: http://jsfiddle.net/8cfmjzg9/

Hope this will help!