16

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>

?

alloy
  • 756
  • 1
  • 13
  • 23
  • https://developer.mozilla.org/en-US/docs/Web/CSS/float – j08691 Dec 16 '14 at 18:34
  • Don't you know the difference between inline-block and block? For example... a DIV is a block level element, SPAN is an inline element. You're like asking what's the difference between block element and inline element which is self-explanatory. – Ross Dec 16 '14 at 18:37
  • To be honest the only difference I can think of is the usage of vertical-align with floated elements. When you use block, there is no vertical align, with inline-block there is. Especially when You are floating multiple elements one by another. – Jacek Kowalewski Dec 16 '14 at 18:47

3 Answers3

18

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.

Community
  • 1
  • 1
Awesomestvi
  • 783
  • 1
  • 5
  • 14
5

You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.

Inline elements — don’t form boxes. They sit horizontally next to each other.

Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.

A good resource: http://learnlayout.com/inline-block.html

According to SitePoint:

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Don’t be fooled. You’re being brainwashed.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

António Regadas
  • 714
  • 4
  • 11
2

When you use float: left; almost any elements behave as a block element. So there is no any difference in this particular case.

enter image description here

Seva Arkhangelskiy
  • 685
  • 3
  • 12