Detailed introduction to the difference between inline elements and block-level elements

First of all, the CSS specification stipulates that each element has a display attribute to determine the type of the element. Each element has a default display value, which are block and inline.

Block-level elements: (The following are the more commonly used block-level elements, details can be found in w3cschool)

<p>定义文档中的分区或节   

<h1>定义最大的标题   

<h2>定义副标题   

<h3>定义标题   

<h4>定义标题   

<h5>定义标题   

<h6>定义最小的标题   

<ul>定义无序列表   

<ol>定义有序列表   

<li>定义有序列表或无序列表的列表项目   

<dl>定义自定义列表   

<dd>定义自定义列表中的条目   

<dt>定义自定义列表中的项目   

<hr>创建一条水平线   

<p>定义段落   

<table>定义表格   

<td>表格中的标准单元格   

<th>定义表头单元格   

<thead>标签定义表格的表头   

<tr>定义表格中的行

Inline elements: (The following are the more commonly used inline elements, details can be found at w3cschool)

<a>定义超链接   

<b>字体加粗   

<span>定义在文档中的行内元素   

<img>向网页中插入题图像   

<input>输入框   

<small>小号字体效果   

<br>换行   

<big>字体加大加粗   

<strong>强调的语气   

<select>创建单选或多选菜单   

<textarea>定义文本域，多行的文本输入控件

The difference between inline elements and block-level elements:

1. Inline elements and block-level functions can be converted to each other. Block-level elements and inline elements can be switched by modifying the display attribute value. Inline elements display: inline, Block-level element display: block.

2. Inline elements and other inline elements will be arranged on a horizontal line, all on the same line;

Block-level elements will always be arranged on a new line, and each block Level elements occupy an exclusive row and are arranged vertically downward. If you want to sort them horizontally, you can use left and right float (float: left/right) to arrange them horizontally.

3. The width and height cannot be set for inline elements. The width and height change with the change of the text content, but the line height (line-height) can be set. At the same time, when setting the outer margin, the upper and lower margins are invalid, the left and right are valid, and the inner margin is valid. Padding is invalid up and down, but valid left and right;

Block-level elements can set the width and height, and the width, height, margins, and inner padding can be controlled at will.

4. Block-level elements can contain inline elements and block-level elements, and can also accommodate inline elements and other elements;

Inline elements cannot contain block-level elements and can only accommodate text or other elements. Inline elements.

The above article has a comprehensive understanding of the difference between inline elements and block-level elements. This is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed information on the difference between inline elements and block-level elements, please pay attention to the PHP Chinese website for related articles!