What are HTML inline elements and block-level elements and their differences

I remember a question the interviewer asked during a previous job interview: What are inline elements and how are they different from block-level elements? This is a very basic interview question, but many beginners usually only focus on the semantics of tags and ignore the inline and block-level characteristics of tags. Therefore, they may not be able to answer the above question or answer it incompletely.

Common inline elements in HTML are:

There are also some text elements such as: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <del>, <u>, etc.

It would be unreasonable to only answer <span> and <img>.

Common block-level elements in HTML are:

<div>, <table>, <form>, <p>, <ul>,

<h1>......<h6>, <hr>, <pre>, <address>, <center>, <marquee>, <blockquote>, etc.

If I only answer <div>, that would be unreasonable.

So what is the difference between them?

Block-level elements

1. Always start from a new line, that is, each block-level element occupies a line and is arranged vertically downward by default;

2. Height, width, margin and padding are all controllable, and the settings are effective, with margin effects;

3. When the width is not set, the default is 100%;

4. Block-level elements can contain block-level elements and inline elements.

Inline elements

1. In a row with other elements, that is, inline elements and other inline elements are arranged in a horizontal line;

2. The height and width are uncontrollable and the settings are invalid. They are determined by the content.

Setting margin is effective on the left and right, and has a margin effect;

Setting margins top and bottom will expand the space but will not produce a margin effect (i.e. the box model margin-top/bottom has values, but there is no margin effect on the page).

Setting padding left and right is effective, setting padding top and bottom will expand the space but will not produce a margin effect (same as above).

The padding effect is shown below:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
	<style>
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	</style>
   <body>
	   <div>Block-level element</div>
	   <span>Inline element</span>
	   <span>Inline element</span>
	   <div>Block-level element</div>
   </body>
</html>

3. According to the concept of tag semantics, inline elements should only contain inline elements and not block-level elements.

Conversion

Of course, the characteristics between block-level elements and inline elements can be converted to each other. HTML can divide elements into three types: inline elements, block elements, and inline-block elements.

Use the display property to convert the three into any of the following:

(1) display: inline; converted to inline elements;

(2) display:block; converted to block elements;

(3) display: inline-block; Convert to inline block element.

Inline block elements combine the characteristics of inline elements and block elements:

(1) No automatic line wrapping, and all other inline elements are arranged on a horizontal line;

(2) Height, width, margin and padding are all controllable, and the settings are effective, with margin effects;

(3) The default arrangement is from left to right.

This concludes this article about what HTML inline elements and block-level elements are and their differences. For more information about HTML inline elements and block-level elements, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<: Detailed introduction to MySQL database index

>>: Docker deployment and installation steps for Jenkins