Hi, I am not sure I fully understand the display issue right now: Is it true to say that a div tag and a span tag could behave exactly the same and be reduced to a state where there is no difference between them in any way whatsoever besides their name — If, just if, we give them the same display (and/or a few more properties with the exact same values) ?
For example:
<div style="display: block /*By default.*/ ;"></div>
<span style="display: block /* Instead of inline by default.*/ ;"></span>
A <span style="display:block"></span> will indeed behave like a div element. In such case the difference is a semantic one, as divs are meant to be containers while spans are wrappers for sections of text or other inline content.
A good rule of thumb to follow is that you can choose your element based on the content:
if your content has other block elements, use a div as a container
if all your content is inline, you can use either of them: a div if you have a lot of content or a span if you only little content.
The trick is not to fight with your tags. Don’t wrestle them into submission by overriding default properties when you have alternatives that do the same thing.
One way you can see what’s going on is to create a very basic HTML page and wrap two identical pieces of text with both span and div tags - don’t bother with any CSS for now - then open the HTML file in your preferred browser. Open up the browser’s dev tools and have a look at the styling applied to the two tags. What you should find is that it is the User Agent Style Sheet that is determining how the two tags behave i.e. the browser’s built-in style sheet.
Now duplicate the HTML file, but create a CSS file for it to use. Try playing around with the display properties for each tag, and look what happens in the browser.
With all that said, both Adrian’s and John’s advice is sound, but the best way to learn is to play around with it yourself.
And that’s how I learned it in the first place - I noticed it by chance when I styled the tags themselves and wanted to test that. Then I saw what Adrian described, and I was very much surprised as for about one year, I was sure that display: command behaves differntly by itself, in divs and spans, thus it was important for me to ask here, not to confirm which I have seen directly but to maybe learn if in another tag-pair display changes, this can’t be done or might bring some unwanted results…
In most cases CSS doesn’t care what element you are using and you can change its display value to suit the appearance that you need it to take in your layout. So if you set a span to be display:block then it will behave exactly like a div element but note that the span is still an inline element and can only appear in the mark up according to the rules of the mark up. Just because you change the** display value** doesn’t mean you change the rules that originally apply concerning its structural mark-up usage.
The opposite is also true and you can turn a div into an inline element and it will behave just like a span. CSS doesn’t really care
AS an aside all elements actually have a display of inline by default and its the User Agent (browser) stylesheet that applies the block and inline displays to elements based on whether they are block or inline elements. The key difference here is that an element like a div is a block element and therefore the UA sets its display to block.
Don’t confuse ‘block element’ with ‘display:block’. A ‘block element’ is an html concept and ‘display:block’ is a css concept.
Yes, css can change the default display types of many elements. div can be displayed as inline and span can be a block. For the most part, there is no need, as they are deliberately there as generic block and inline containers to choose from as needed. You need a block? Use div. You need inline? Use span.
But the thing to be aware of are the semantics of elements. Dividing something into divs would create a semantic separation between the parts. So there may be a few exceptions where you may want to use spans for semantics in the html, but display as block in the css.
For example, I’m making a web page with a big h1 title. For styling I want to break the lines in the h1. Without css I could have:-
The semantics are correct, but with the 2 line layout I want.
The key is, make the html handle structure and semantics of the content, where most of the time, default display types will be suitable, and let css handle the look and layout.
