Search code examples
htmlcss-floatblockcss

Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?

In other words, what's the difference between:

<div style="float: left; display: inline-block;">text</div>

and 

<div style="float: left; display: block;">text</div>

?

Solution

  • An answer by @thirtydot might help you... Question's link

    I just found out that floating an element will also make it a block, therefore specifying a float property and display:block is redundant.

    Yes, display: block is redundant if you've specified float: left (or right).

    (What would happen if you tried to specify display:inline and float:left? )

    display: inline will not make any difference, because setting float: left forces display: block "no matter what":

    http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

    Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

    To summarize said table: float = display: block.

    However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

    Are there any other examples of redundant combinations to watch out for? block & width ? etc,

    Some examples:

    • If you set position: absolute, then float: none is forced.
    • The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

    Is there a tool that can check for such things?

    I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.