Inline-block as a replacement for float

    Six months ago I did article translation on Habr Read more about property float . This time, let's look at it from a slightly different angle. When developing a site, we often use floats to position certain blocks on a page, such as sidebars. But is it really necessary?

    Float is not always convenient: for example, when typesetting a grid with an image. Sometimes it is appropriate to use inline-block, which imitates the behavior of a float.

    What is inline-block?


    The usual structure of a block element:



    Inline-block  is a value that can be assigned to the display property. The name comes from some characteristics of both inline and block elements.

    • Block elements are height, width, padding, margin, border, and also are located vertically, under each other.
    • Inline elements are arranged horizontally, one after another.
    • Inline-block elements have the characteristics of both block and inline elements.


    Inline block vs float: differences




    • Unlike float, inline-block is in document flow - “document flow”, so there is no need to use clearfix or overflow: hidden. 
    • Obviously, a float cannot be centered using text-align: center.
    • Inline-block is aligned by default to the baseline, and float to the top.
    • If there are several inline-blocks on the page, each of which is located on a new line, then there will be some gaps between them.
    • Inline-block is not supported or partially supported in IE6 and IE7


    Watch the demo

    Several techniques can be used to deal with gaps. Removing spaces in lists:

    • one
    • two
    • three


    Using a negative margin value:

    nav a {
      display: inline-block;
      margin-right: -4px;
    }
    


    A strange way with no closing LI tag:

    • one
    • two
    • three


    Setting the font-size value to zero:

    nav {
      font-size: 0;
    }
    nav a {
      font-size: 16px;
    }
    


    You can read more about these methods in the CSS-tricks article .

    What to use?


    The choice between inline-block and float must be made based on the tasks to be solved in a particular design. In the end, it all comes down to the differences between these two tools:

    • Use inline-block if you need more control over the vertical alignment and horizontal positioning of elements.
    • Use float if you need to wrap around elements, as well as support for older browsers, and don’t want to bother with the problem of empty spaces between blocks.


    Image grid


    Such grids are used in photo galleries. This example illustrates well the behavior of inline-block and float. Using float is justified if the images are the same height. If the height is different, then the elements can be displayed crookedly:



    Inline-blocks do not have such a problem, because they are located at the same level in the line. Therefore, inline-block is better for typesetting the gallery:



    View the demo

    Conclusion


    We are used to using float to solve many problems in page layout. However, it is sometimes easier and more convenient to use inline-block. And sometimes it’s more correct to use good old tables.

    Used materials and useful links on the topic:


    Also popular now: