Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between Div and Span

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 322
    Comment on it

    Div:

    1. It is a block -level element.
    2. It is used as a container that is used within a page or document.
    3. It is used to wrap sections of a document.
    4. By default, line break is placed before and after the element.
    5. It is used within paragraph or an image with its caption.
           (Try in text editor)
     <html>
          <head>
               <style>
               .div1 {
             width: 518px;
               color: navy;
                 background-color: orange;
               border: 2px solid black;
               padding: 5px;
               }
               .div2{ width: 500px;
                  color: navy;
                background-color: pink;
                 border: 2px solid red;
                padding: 5px;}
                </style> 
                        <body>
    
                   <div class="div1">
                         This is outer div.
                        <div class="div2">
                             contains inner div.
                            </div>
                              </div> 
                                 </body>
                                        </html> 
    

    Span:

    1. It is a In-line element.
    2. It allows you to seperate things from the other elements around them on a page or within a document.
    3. It is used to wrap small portions of text, image etc.
    4. No line break.
    5. It is used within a sentence.
                (Try it in text-editor)
                         <!DOCTYPE html>
                              <html>
                                  <head>
                                       <style>
                               span.text {font-size:50px;color:red;}
                                </style>
                                  </head>
                                  <body>
                           <h1>A <span class="text">Span</spa<!DOCTYPE html>
                               <html>
                             <head>
                                  <style>
                           span.text {font-size:50px;color:red;}
                             </style>
                            </head>
                                <body>
                           <h1>A <span class="text">Span</span> Text</h1>
                     <p>This is example of <span class="text">span</span> </p>       
                            </body>
                                 </html>
                              <h1> Text</h1>
                               <p>This is example of <span class="text">span</span> </p>
                                            </body>
                                                      </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: