span width in HTML Css

**Ash maker** · 03-03-2010

I am creating a simple page and studied a lot about the controls in the HTML.But not getting the actual concept to use the Span control in HTML and how much it relates with CSS and padding.

Please tell me and guide me,how can I manage the HTML span control in pages and CSS also.What the actual purpose of this control.

**Praetor** · 03-03-2010

The SPAN tag in the web development environment,is very useful and popular tags within the HTML language,facilitate you to include the desired html code and required elements for your web pages Like - Highlighting text,applying a background image and mouse over events.

The effective settings for your web page elements is contained within the following tag


Create the mouse over event.
Highlighting text ...


NOTE : The setting can be applied on mouse over events.

**Katty** · 03-03-2010

Code:

<SPAN Attribute=value>
///....Tags and other text coded here.....!!!!
</SPAN>

And the Attributes are described here :

ID = string
CLASS = string
STYLE = string
TITLE = string
LANG = Language (i.e. EN- English)
DIR = ltr|rtl; specifies text reads procedure left to right or vice versa.
SCRIPTING EVENTS = string

**kelfro** · 03-03-2010

Suppose,I am creating a page.I tagged an image on the page and whenever mouse is pointing on the image,the image gets change.You can construct the code but need to be the knowledge
of events in java script.

The code is given below which will show you the same effect -

Code:

<SPAN onMouseOver="document.pic1.src='image2.gif'" 
              onMouseOut="document.pic1.src='image1.gif'">
   <img src="image1.gif" height="40" width="100" name="pic1">
</SPAN>

**Zecho** · 03-03-2010

Span with the CSS

The span tag can be structured with some contents and you need to change the display behavior of the contents which is contained within the SPAN control
can be changed successfully.

Suppose you have created a list using HTML control within the SPAN control
and need to change the display behavior of both tags then you can do it using
CSS.

<li> Both will come.</li>
<li>AND He is the first.</li>
<li>OR She is the first.</li>

**Reegan** · 03-03-2010

The above example is shown by the member and you can use the above code to change the behavior of display property of the text by CSS controls.

Now use CSS control and chnage the display behavior of the contents.

Code:

<style type="text/css">
ul 
{
        list-style-type: none;
        padding-left: 0px;
}

span 
{
  display: inline-block;
  width: 50px;

}
</style>

After combination of both code within the HTML file,you can see the display
difference of contents for both tags.