Menu
Is there any reason to use a <div style="display:inline-block"> instead of a <span> to layout a webpage?
Can I put content nested inside the span? What is valid and what isn't?
It's ok to use this to make a 3x2 table like layout?
<div> <span> content1(divs,p, spans, etc) </span> <span> content2(divs,p, spans, etc) </span> <span> content3(divs,p, spans, etc) </span> </div> <div> <span> content4(divs,p, spans, etc) </span> <span> content5(divs,p, spans, etc) </span> <span> content6(divs,p, spans, etc) </span> </div> 
257
The <span> element is an inline container used to mark up a part of a text, or a part of a document. The <span> element has no required attributes, but style , class and id are common.
Span and div are both generic HTML elements that group together related parts of a web page. However, they serve different functions. A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling.
The display: inline-block Value Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
For the purpose of styling, elements are divided into two categories: block-level elements and inline elements. In summary, a <span> element is used as an inline element and a <div> element as a block level element.
According to the HTML spec, <span> is an inline element and <div> is a block element. Now that can be changed using the display CSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so:
<p>...<div>foo</div>...</p> is not strictly valid even if you change the <div> to inline or inline-block.
So, if your element is inline or inline-block use a <span>. If it's a block level element, use a <div>.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
