behind
the  
codes
{

Programming, web design, gadgets, and anything beyond
 

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

Fact #1: DIV is a style-able blockhead.

Below are DIVs. You can see that DIV is always 100%-wide to the viewport—that’s what it means to be a block element. You can try resizing your browser to see how these DIVs will automatically adjust their girth sizes.

Execution
DIV with red border
DIV with green background
DIV with a lot of styles
DIV with big font

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

You can also see that each DIV has its own styling. Without these, DIVs are just as plain as a white sheet of paper—or perhaps plain-er—and will inherit their parents’ styles.

If you don’t want it to be 100%-wide, you can give it a width (and height too, if you need it), but it will still be a block element (cannot have other elements next to it). Not too sociable, eh?

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

With these in mind, let’s compare DIV with SPAN in the next page.

Share and Enjoy:
  • Print
  • email
  • RSS
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Reddit
  • Digg
  • Slashdot

Pages: 1 2 3 4 5 6

Leave a Reply