</Block and inline elements in HTML>

Block and inline elements in HTML

In HTML every element in HTML has a default display property which depends upon the element type.HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements . Block or inline are the default display value for the most of the elements.

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.

A Block-level element occupies the entire space of the parent (container) such as <div>

HTML_Syntax First_Web_Page Html_Elements Headings Video_Tag Html_Attributes Audio_Tag Style Formatting Images Table Lists Iframe Symbols HTML_Quiz

</Block and inline elements in HTML >

Block elements

A block-level element always starts on a new line and stretches out to the left and right as far as it can .
Block-level element occupies the entire space of the parent (container) .
<div> and <p> tag are the best example of block Elements.
Common block-level elements: are <div>,<p>,<article>,<section>,<figure>,<footer> etc

				
<!DOCTYPE html>
<html>

<body>
    <!-- Div element. -->
    <div style="background-color:black; 
                color:white; 
                padding:20px;">

        <h1>The developer Brains School</h1>

        <h3>This is H3 heading and headings are also Block element.</h3>

    </div>

</body>

</html>

Try it Yourself

Inline Elements

HTML Inline elements are the opposite of the block elements .They do not start on a new line and takes full width.
Inline as the name says “included as a part of the main text and not as a separate section
Inline elements occupy the space as needed within the space defined by the main element

Common Inline-level elements: are <a>,<span>,<img>,<code>,<cite>,<button>,<input> etc.

				
<!DOCTYPE html>
<html>
 <style>
 .highlight{
     color: green;
     }
 </style>

<body>

 <h2>We use span element to <span class="highlight">highlight</span>
  text portion because span is inline element and don't break heading</h2>

</body>

</html>

Try it Yourself

Changing element display levels using CSS

You can change from display block level to Inline and Inline to block by using CSS display Property . For Example , by changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. For example, even if the display of the span element is changed to "block", it still would not allow to nest a div element inside it.

				
div{
    display: inline;
    }
span{
    display: block;
    }

HTML Block and Inline Elements

</Block and inline elements in HTML>