A span is an inline element and div is a block element. Is there a 'native' (X)HTML / HTML5 inline-block element that can act like a container? (Without applying CSS)
Definitions:
block This value causes an element to generate a block box.
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. inlineThis value causes an element to generate one or more
inline boxes.
No, there is not. You have to specify inline-block explictly.
Strictly speaking <button> fulfils the criteria set. HTML5 says
When the button binding applies to a button element [which it ordinarily does], the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
However while it is a container element that has a default inline-block rendering, it is not a General Purpose container so can't be used for anything but as a button.
iframe is also inline-block too
Related
In the CSS specifications in part 9.2.4 the description of the inline-block value for the display property says:
This value causes an element to generate a principal 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.)
What does the following sentence mean?
The inside of an inline-block is formatted as a
block box
Does it mean that an inline-block has a block box inside?
Check this JSFiddle:
<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats">
<span>The contents of floats are </span>
The image is floated, and the span has clear:both. However, if the span has display value inline or inline-block, the clearance is not created. Only if it is block, the clearance is created.
I checked the Spec, it says:
both: Requires that the top border edge of the box be below the bottom
outer edge of any right-floating and left-floating boxes that resulted
from elements earlier in the source document.
It doesn't mention how the display affects the creation of the clearance. Could anybody help to explain?
It's simple: clear only applies to block-level elements.
'clear'
Applies to: block-level elements
Block-level elements are defined as
Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). The following
values of the display property make an element block-level: block,
list-item, and table.
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.
I was under the impression that inline elements could not have their heights resized, but I am able to do so with <input type="text"/> elements.
Am I correct that <input type="text"/> elements are inline?
If so, what makes them different from <span></span> elements in how they can or cannot be resized.
An input element is inline-block by default, not inline.
On the other hand, an element such as a span, is inline by default.
The width/height of an inline-block element, such as input can be changed (example).
While an inline element, for instance, span, cannot be changed by default, as its dimensions are defined by the "rendered content within them". (example).
This [width] property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats. - W3 reference
There is a difference between inline and inline-block.
You can change the height of the inline-block meanwhile you can't change the inline elements.
So I think what ever the thing you have changed might be an inline-block element.
Here is a Fiddle for you!
They're rendered as inline-block per default. This is why you can specify a width. You can see this in chrome dev tools for example.
http://codepen.io/johannesjo/pen/BrcuE
I was making a menu with id menu which had the following set:
display: inline;
height: 200px;
Once I removed display: inline;, height worked again.
Why?
display: inline;
Are usually used to refer to text elements;
From the w3c page:
[inline] Causes an element to generate one or more inline boxes.
Therefore, the height you must set is the line-height property. From the w3c page:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
Notice here that you can control only the minimal height of your inline elements
Because the spec says so:
'height' … Applies to: all elements but non-replaced inline elements, table columns, and column groups
line-height, however, does apply to inline elements.
By making something display inline you are effectively making it the same as a span. As such the only valid height value is line-height since you are working on an inline element.
To render height values you would need to use a div tag or force your existing tab to render like a div / object which accepts height attributes. You can do this by setting display:block.
In essence you can render a div to work like a span by setting display:inline, and conversely render a span as effectively a div via display:block.
Span tag are meant for inline styling such as font size, colour, decoration, etc.