Block level Elements

-> Block-level elements take up as much space as possible by default.

-> Each block-level element will start a new line on the page, stacking down the page.

-> In addition to stacking vertically, block-level elements will also take up as much horizontal space as possible.

Ex:

1. <p> --> Paragraph tag

2. <ol> --> Ordered List

3. <ul> --> Unordered List

4. <dl> --> Description List

5. All heading(h1 to h6)

6. <article>

7. <section>

Inline Elements

-> Inline elements display in a line. They do not force the text after them to a new line.

-> An anchor(or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

Ex: <a> , <strong> , <em> , <b> , <i> , <q> , <mark> , <span>.

Block Elements vs Inline Elements

-> Every HTML element has a default method of displaying on the page. This default setting is determined by whether elements are considered block-level or inline.

Block Level Elements(difference)

Block-level elements have the following properties.

1. Always start on a new line.

2. Take up as much horizontal space as possible(the full width of the container or browser window if there is no container).

3. This will respect the width and height CSS properties.

4. Horizontal and vertical margins both work.

Inline Elements(Difference)

Inline elements have the following properties.

1. Do not start on a new line.

2. Only use as much horizontal space as required by the content.

3. Do not accept width and height CSS properties.

4. Margins will work horizontally, but not vertically.

5. Padding works on all sides, but the top and bottom may overlap with other elements.