FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@harish 579

What is the Block and inline elements in HTML


2021-11-17 21:23 · 4 min read

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 is the default display value for 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>

 

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 Pro developer School</h1>

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

</div>

</body>

</html>

 

Inline Elements

HTML Inline elements are the opposite of the block elements. They do not start on a new line and take 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>

 

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 nesting a div element inside it.

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






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer