Home Accessibility Courses Twitter The Mouth Facebook Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
span and div tags - a css comparison

Both <span> and <div> tags allow you to set the style of your text - fonts, colours, weights, and so on. So what is the difference?

A <span>span tag allows you to alter the presentation style within the current hierarchical block, whereas the <div> tag starts a new block for you. And what does this mean? It means that you can specify options such as text alignment within a <div> but not within a <span>.

I understand people like to see these things in action:

Basic Text
A span - brown and should be right
A div - purple and will be right
More basic text


and here's the HTML:

<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-style: solid; border-color: green; padding: 3px;">
Basic Text<br />
<span style="text-align: right;color: brown;">A span - brown and <i>should</i> be right</span><br />
<div style="text-align: right;color: purple;">A div - purple and <i>will</i> be right</div>
More basic text</div>

Why did I use padding and not margin? Because padding goes into the element and margins go onto the element. That's "inside" v "outside"

Why did I put a <br /> after the brown but not after the purple? Because the <div> tag starts and ends its own block, so there's one there anyway unless you've set it to be inline, whereas there's no such block with the <span>.
(written 2007-01-02)

 
Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles
W509 - Web and Intranet - Style
  [2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
  [1519] Flipping images on your web page - (2008-01-26)
  [1034] The new web site look spreads - (2007-01-15)

W702 - Web and Intranet - Elements of cascading style sheets
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [1998] Text on a background image - (2009-01-16)
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1017] css - handling white space and pre - (2007-01-01)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)


Back to
Open Source Courses and Business Hotel - products and prices for 2007
Previous and next
or
Horse's mouth home
Forward to
Parallel processing in PHP
Some other Articles
Finding public writeable things on your linux file system
No courses. No hotel guests. Rushed off our feet!
PHP - static declaration
Parallel processing in PHP
span and div tags - a css comparison
Open Source Courses and Business Hotel - products and prices for 2007
Modernising from tables to cascading style sheets
Search engine placement - long term strategy and success
Christmas Season Piccies
4759 posts, page by page
Link to page ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96 at 50 posts per page


This is a page archived from The Horse's Mouth at http://www.wellho.net/horse/ - the diary and writings of Graham Ellis. Every attempt was made to provide current information at the time the page was written, but things do move forward in our business - new software releases, price changes, new techniques. Please check back via our main site for current courses, prices, versions, etc - any mention of a price in "The Horse's Mouth" cannot be taken as an offer to supply at that price.

Link to Ezine home page (for reading).
Link to Blogging home page (to add comments).

You can Add a comment or ranking to this page

© WELL HOUSE CONSULTANTS LTD., 2019: 404 The Spa • Melksham, Wiltshire • United Kingdom • SN12 6QL
PH: 01225 708225 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/mouth/1019_spa ... rison.html • PAGE BUILT: Sat May 27 16:49:10 2017 • BUILD SYSTEM: WomanWithCat