Menu
Is <div/> different from <span style="display:block" /> in any way?
They render just fine the same. Any semantic difference between the two?
650
A span is by default an inline element, you cannot set the width, height, and other properties associated with blocks. On the other hand, an element with the property inline-block will still "flow" with any surrounding text but you may set properties such as width, height, etc.
display: blockAn element that has the display property set to block starts on a new line and takes up the available screen width. You can specify the width and height properties for such elements. Examples of elements that are at block-level by default are <div> , <section> , <p> , and lots more.
<span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. 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.
Yes they are different.
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div> <span style="display: block;"><p>wrong</p></span> The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
77
Here's an example where it makes a real difference (for valid code, at least):
<a href='example.com'> <span class='title' style='display:block;'>The title of the image is also a link</span> <img src="example.com/someimage.jpg"/> </a> That allows you to make your span a block level element and allows the image and span to highlight together when moused over.
A div would not be valid nested inside an a tag.
26
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
