The problem is that it is not clear how the vertical-align property works.

Here is an example:

div { display:inline-block; border:1px solid red; padding:5px; } div.main { padding:10px; } .first { width:100px; height:100px; } .second { width:100px; height:100px; } .third { width:110px; height:50px; } .four { width:110px; height:50px; } 
 <div class="main"> Hello world! <div class="first">Hello world 1! Hello world 1! Hello world 1!</div> <div class="second">Hello world 2!</div> <div class="third">Hello world 3!</div> <div class="four"></div> </div>

As you can see the blocks go in a row as required by display:inline-block; But you need to somehow set the alignment of these blocks: align with the top, bottom, middle. And here the vertical-align property should help us, because the display:inline-block; property display:inline-block; gives us the nature of inline objects. But it was not there that the problem was that if the block is an inline-block, then if there is some text inside, then the alignment will be equal to this text, and not to the block.

Explain to me how vertical-align works with inline-block .

How to ignore content (text) inside an inline-block element?

    2 answers 2

    There is text alignment, there is a block. By default, vertical-align: baseline . baseline - means a line of text inside the inline block.

    If you don’t need it, set vertical-align with a different value: Other properties like top , middle , bottom do not depend on the contents of the block and are aligned on the borders of the elements.

    Unlike tables, vertical-align is assigned to the element itself, and not to the parent.

    See different vertical-align properties in my snippet:

     $('a').click(function(){$('.main > div').css("vertical-align",$(this).data("align"))}) 
     div { display:inline-block; border:1px solid red; padding:5px; } div.main { padding:10px; } .first { width:100px; height:100px; } .second { width:100px; height:100px; } .third { width:110px; height:50px; } .four { width:110px; height:50px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> Hello world! <div class="first">Hello world 1! Hello world 1! Hello world 1!</div> <div class="second">Hello world 2!</div> <div class="third">Hello world 3!</div> <div class="four"></div> </div> <a href="javascript:;" data-align="baseline">baseline</a> <a href="javascript:;" data-align="top">top</a> <a href="javascript:;" data-align="bottom">bottom</a> <a href="javascript:;" data-align="middle">middle</a>

    • The vertical-align property is familiar with these values, but your answer does not answer my questions - MaximPro
    • @MaximPro Which question doesn’t answer exactly? - Crantisz
    • At least for the first =) - MaximPro
    • " Explain to me how vertical-align works with inline-block. "? - Crantisz
    • Yes ............. - MaximPro

    Comparison of the properties of "display" is clearly shown here http://htmlbook.ru/css/display . As far as I know, "vertical-align" works correctly only for tables, unfortunately. In other cases, you will have to use padding / margin or js