Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Difference between Div and Span

    @shilpi.badoni
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 351
    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>
    div span block elements in-line elements div vs span
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: