CSS - Display Block And Inline


  CSS - Display Block And Inline

  • A block-level element always starts on a new line and takes up the full width available.
  • An inline element does not start on a new line and only takes up as much width between the elements.

Sample Code :

<!DOCTYPE html>
<html>
    <head>
        <style>
            span
            {
                display: block;
            }
            li 
            {
                display: inline;
            }
        </style>
    </head>
        <body>
            <span>Welcome to Wikitechy</span> 
            <span>The best e-learning website in the world</span>
            <ul>
            <li><a href="http://www.wikitechy.com/">Wiki</a></li>
            <li><a href="http://www.wikitechy.com/">Techy</a></li>
            </ul>
        </body>
</html>

Code Explanation :


    Here Span is an html element which is used to group inline-elements in a document. The <span> tag provides no visual change by itself. 

    In CSS, display property with values as “block” for a span tag will result in a line break between multiple span elements. 

    li stands for list and it is an html element.

    Applying display property with value as “inline“ will  display a lists horizontally.

    First we are using span tag for the text “Welcome to wikitechy”. And another span tag for “The best E-learning Website in the world” .Since we had specified display property as block for span tag , so the line break appears between the two texts.

    Mostly all the list items will appear vertically in the browser window. In CSS, Display: inline displays all the list elements to appear horizontally.

Output :


    The text “The best e-learning website in the world” will have a line break and appear in the next line, which is displayed in the above window.

    The lists Wiki and Techy appear horizontally.