Let’s talk HTML and CSS: about DIV and SPAN : behindthecodes.com - Programming, web design, gadgets, and anything beyond

Nov '11

3:31 pm

Let’s talk HTML and CSS: about DIV and SPAN

Fact #3: DIV can be turned into SPAN, and vice versa.

You can use display: block on SPAN or display: inline on DIV to change the element’s display placement…

Execution

100px DIV with red border

100px DIV with green background

100px DIV with a lot of styles

100px DIV with big font + height

Source

				<div style="display: inline; 
										width: 100px; 
										border: 1px solid red">
					100px DIV with red border</div>
				<div style="display: inline; 
										width: 100px; 
										background: green">
					100px DIV with green background</div>
				<div style="display: inline; 
										width: 100px; 
										border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white">
					100px DIV with a lot of styles</div>
				<div style="display: inline; 
										width: 100px; height: 100px; 
										border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt">
					100px DIV with big font + height</div>

… which essentially turns DIV into SPAN and vice versa.

Execution

100px SPAN with red border 100px SPAN with green background 100px SPAN with a lot of styles 100px SPAN with big font + height

Source

				<span style="display: block; 
										width: 100px; 
										border: 1px solid red">
					100px SPAN with red border</span>
				<span style="display: block; 
										width: 100px; 
										background: green">
					100px SPAN with green background</span>
				<span style="display: block; 
										width: 100px; 
										border: 3px solid orange; padding: 5px; margin: 20px; background: brown; color: white">
					100px SPAN with a lot of styles</span>
				<span style="display: block; 
										width: 100px; 
										height: 100px; border: 7px solid purple; padding: 20px; margin: 5px; background: cyan; font-size: 12pt">
					100px SPAN with big font + height</span>

Now pay a very careful attention here: this CSS display style WILL NOT make DIVs able to have other elements on their left and right sides, NOR WILL IT make SPANs able to have dimensions. In fact, that’s the very definition of block and inline elements: block elements are just like line-exclusive DIVs, and inline elements are just like nonsizeable SPANs. If you want to do these, you’ll need something different…. Turn to the next page if you want to know!

Share and Enjoy: