内联元素的垂直对齐并消除内嵌块元素之间的空间

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!