Could I get a few concrete examples of how these two differ? It seems that replaced inline elements have properties like width, height, margin etc that non-replaced inline elements don't have (thus making the difference between block elements and replaced inline elements harder to explain) and vice versa, inline-blocks have some of the delicate features that inline elements have as well...
They sorta meet in the middle it seems coming from two different ends...
Maybe this fiddle will give you a better insight in inline, inline-block and block
http://jsfiddle.net/4h9JS/
The biggest difference is that inline-block is still an inline element, but behaves as a block element
Related
Could you please explain this rule of floating elements when combined with inline elements?
"The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document".
If you could give me a simple example that would be great, actually my more specific question is that, does the statement apply when the inline elements are siblings of the floated elements?
I also know that all elements when inline become block level when floating, but that's not my question.
The question seems too technical for me to understand.
Here is my case code.
I create a div which contain element i. The i has width and height attribute and I achieve it with different way. So ,I encounter the line-height issue. I know a little about float vs inline-block. But, What cause out the line-height in my case?
inline-block is treated as an inline element (like text). If it is taller than other inline elements in the same line, it forces the line-height to be taller. You can use vertical-align:top|middle|bottom; to change the alignment of the inline-block element (more options for vertical-align here: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align).
A floated element is just pushed to one side or the other, and the text flows around it.
In what all cases does a floated element push other elements and/or text out of the way?
For example, can floats ever push a "cousin" element around (or any other text/element that requires traversing up the DOM)?
My understanding is that floated elements will overlap only adjacent elements (and their contents) but will then push text and inline/inline-block elements out of the way so no overlap occurs. I've had a few times where float behavior has surprised me in the past so I'd like to verify what I thought I knew.
Directly from the MDN.
Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.
Block formatting context
What is the difference between a DIV with display: inline-block and a SPAN ?
Simalarly, between a SPAN with display: block and a DIV.
There will only be a semantic difference per se between the two, given the correct styles, both will probably display the same.
However, some browsers may or may not display correctly. Also, you can't nest block elements in spans, that is invalid HTML, and may cause some browsers to choke or display incorrectly.
Divs are block elements, spans are inline elements. Don't do that is the bottom line, it will make things messed up.
Also, spans have the style display:inline, not display:inline-block
From the W3 Specification:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
You can see how they differ visually here.
First and foremost, a span, by default is display:inline.
According to w3schools, the difference between display:inline and display:inline-block is
An inline element has no line break before or after it, and it
tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not
tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same
line as adjacent content), but it behaves as a block element.
Can someone explain the difference between 'block' and 'inline-block' for the CSS display setting?
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. For example:
(Source: http://www.impressivewebs.com/inline-block/)
inline-block treats the element like other inline elements but allows the use of block properties.
Elements with display: block take up as much width as they are allowed and typically start on a new line.
This is a wonderful detailed article about this topic: What’s the Deal With Display: Inline-Block?