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>
?
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 anddisplay: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:
position: absolute
, then float: none
is forced.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.