I was unable set the width for an inline element <span> while creating a table-row with multiple span elements. I was able to modify the width once I put a float: left as well.
Why was I not able to set the width and height of inline elements? How does adding a float change things?
Inline elements by definition do not take explicit width or height but are inline and conform to the surrounding elements. They only occupy space bounded by the tags. For example:
This is some <span>text</span>
<span>text</span> only occupies the space that houses text. It's in the same line with the other text nodes in the HTML.
The float property implies block layout and the display property of elements is changed to block (in most cases) thus making them block-level elements where you can set explicit width and height because they occupy all of their container. Per the MDN documentation:
As
floatimplies the use of the block layout, it modifies the computed value of thedisplayvalues, in some cases
In this case, the table (viewable at the MDN documentation) shows that any elements with display: table-row would blockified and have display: block when floated.
Answer A:
You can't explicitly set the width of an inline element because it is relative to the surrounding elements, and thus is restricted by their widths.
Answer B:
Floating an element with float automatically makes it into a block-level element by applying display: block to it. A block-level element occupies the entire space of its parent element (container), thereby creating a 'block'.
Hope this helps! :)
