difference between span and div


  • is a block tag, while is an inline tag.
  • Note that it is illegal to place a block level element within an inline element, so:
Some text that
I want
to mark</span> up</div>

…is illegal.

    • There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
    • But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we’re supposed to use the right tag for the right purpose — not like in the old days when we indented using <blockquote> whether the content was a quote or not.
    • So, what do you do when there is no meaning to the thing you’re trying to do? There’s nomeaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
    • For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

difference padding/margin

To me the biggest difference between padding and margin is that margins auto-collapse, and padding doesn’t. Consider two elements next to each other each with padding of 1em. This padding is considered to be part of the element, and is always preserved. So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element. Thus content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap. So in this example you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences is that padding is included in the click region and background color/image, but not the margin.

By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.



In the World Wide Web, a query string is the part of a Uniform Resource Locator (URL) that contains data to be passed to web applications

A typical URL containing a query string is as follows:

The main use of query strings is to contain the content of an HTML form, also known as web form. In particular, when a form containing the fields field1, field2, field3 is submitted, the content of the fields is encoded as a query string as follows:



If a form is embedded in an HTML page as follows:

<form action="cgi-bin/test.cgi" method="get">
  <input type="text" name="first">
  <input type="text" name="second">
  <input type="submit">

and the user inserts the strings “this is a field” and “was it clear (already)?” in the two text fields and presses the submit button, the program test.cgi will receive the following query string:


simple css facts

div.A                           tag=div, class=”A”
div#A {set up a}       tag=div, id=”A”, only has effect a
div#A {set up b}      tag=div, id=”A”, now it has  both effects a and b if they donnot confilicts

#error-display li {

set up style xx

}  // any <li> element within the error-display will use style xx