Difference between Block-level and Inline elements
0 3425
HTML Page is made up of various elements that used to building blocks (Structure of page) of web pages. Every element in HTML is displayed in one of a few ways.
By default, HTML most elements are divided into two categories: block-level elements and inline elements. Every HTML element has a default display value, it's depending on what type of element it is.
The default HTML display value for most elements is block or inline.
Block Level Elements
A block-level element is an Html element that always starts on a new line on a web page and it extends the full width of the available horizontal space of its parent element.
Examples of Block Level Elements:
<div> <footer> <form> <h1>-<h6> <header> <hr> <li> <nav> <p> <section> <ul> <video>
Note:
- If no width is set, it will expand naturally to fill its parent container
- If no height is set, it will expand naturally to fit its child elements
- Ignores the vertical-align property
- A line break before and after the element
- It is always 100% screen size in block elements
Inline Elements
HTML inline-level elements can appear in the body of an HTML page. HTML inline-level elements do not start on a new line. It can contain data and other inline elements.
You can not write HTML block-level element inside HTML inline-level elements (can’t wrap block-level elements). HTML inline-level elements create shorter structures (than block-level elements).
Example of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.
Note:
- HTML Inline elements start in an anywhere line, it does not force in new lines.
- HTML Inline elements No line break before or after the element
- HTML Inline elements will use only the exact space in needs
- HTML Inline elements can be 1%-100% of screen size in inline elements
Share:
Comments
Waiting for your comments