Elements are the basis of the document structure. In css, each element generates a box containing content, which is called a "box". However, different elements are displayed in different ways, some occupy a whole row, and some are horizontally next to each other.
For example, the display mode of div and span is different, because div is a block-level element and will occupy a row, while span is an in-line element, and multiple spans can be placed in a row.
Next, let’s talk about the differences between block-level elements, inline elements, and inline block-level elements in CSS.
1. Block-level element block
Block-level element, as the name implies, the element presents a "block" shape, so it has its own width and height, that is, the width and height can be customized. In addition, the block-level element is more overbearing, it occupies the height of a row by itself (except for float), and can generally be used as other containers, which can accommodate block-level elements and in-line elements.
Block-level elements have the following characteristics:
- Each block-level element is on its own line;
- Height, row height, margin and padding can all be controlled;
- If the width of the element is not set, the default is the width of the parent element (parent element width 100%;
- Multiple block element tags are written together, the default arrangement is from top to bottom;
<address> // 定义地址
<caption> // 定义表格标题
<dd> // 定义列表中定义条目
<div> // 定义文档中的分区或节
<dl> // 定义列表
<dt> // 定义列表中的项目
<fieldset> // 定义一个框架集
<form> // 创建 HTML 表单
<h1> // 定义最大的标题
<h2> // 定义副标题
<h3> // 定义标题
<h4> // 定义标题
<h5> // 定义标题
<h6> // 定义最小的标题
<hr> // 创建一条水平线
<legend> // 元素为 fieldset 元素定义标题
<li> // 标签定义列表项目
<noframes> // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> // 定义在脚本未被执行时的替代内容
<ol> // 定义有序列表
<ul> // 定义无序列表
<p> // 标签定义段落
<pre> // 定义预格式化的文本
<table> // 标签定义 HTML 表格
<tbody> // 标签表格主体（正文）
<td> // 表格中的标准单元格
<tfoot> // 定义表格的页脚（脚注或表注）
<th> // 定义表头单元格
<thead> // 标签定义表格的表头
<tr> // 定义表格中的行
2. In-line element inline
Inline elements cannot set width and height, but they can be on the same line as other inline elements. Inline elements generally cannot contain block-level elements. The height of the inline element is generally determined by the font size inside the element, and the width is controlled by the length of the content.
In-line elements have the following characteristics:
- Will not occupy a single line, adjacent elements in the line will be arranged in the same line, and will automatically wrap until the line does not fit, and its width varies with the content of the element;
- The height and width are invalid, the outer margin and the inner margin (padding) are only valid in the left and right directions, and the upper and lower sides are invalid;
- Setting the row height is effective, which is equivalent to setting the row height for the parent element;
- The width of an element is the width of the text or image it contains, and cannot be changed;
- Block-level elements cannot be placed in inline elements, and no more links can be placed in a link;
<a> // 标签可定义锚
<abbr> // 表示一个缩写形式
<acronym> // 定义只取首字母缩写
<b> // 字体加粗
<bdo> // 可覆盖默认的文本方向
<big> // 大号字体加粗
<br> // 换行
<cite> // 引用进行定义
<code> // 定义计算机代码文本
<dfn> // 定义一个定义项目
<em> // 定义为强调的内容
<i> // 斜体文本效果
<kbd> // 定义键盘文本
<label> // 标签为 input 元素定义标注（标记）
<q> // 定义短的引用
<samp> // 定义样本文本
<select> // 创建单选或多选菜单
<small> // 呈现小号字体效果
<span> // 组合文档中的行内元素
<strong> // 加粗
<sub> // 定义下标文本
<sup> // 定义上标文本
<textarea> // 多行的文本输入控件
<tt> // 打字机或者等宽的文本效果
<var> // 定义变量
3. Inline-block
Inline block-level elements, which have the characteristics of block-level elements and inline elements, can freely set the element width and height, and can also place multiple inline block-level elements in a row. For example: input and img are in-line block-level elements, which can set the height and width as well as multiple lines.
The specific features are as follows:
- Height, row height, outer margin and inner margin can all be controlled;
- The default width is the width of its own content. It does not occupy a single line, but there will be a gap between them. Set the font-size of the previous level to 0 to eliminate the gap;
<button>
<input>
<textarea>
<select>
<img>
4. Element type conversion display
display: block, defines the element as a block-level element
display: inline, defines the element as an inline element
display: inline-block, defines the element as an inline block-level element
5. Summary
Regardless of block-level elements or in-line elements, the difference: one is the arrangement, the second is the width and height margin settings, and the third is the default width.
- Block-level elements will occupy one line, while inline elements and inline block elements will be displayed in one line;
- Block-level elements and inline block elements can set the width and height attributes, but the inline element settings are invalid;
- The width of block-level elements defaults to 100%, while inline elements determine their width based on their own content or sub-elements;
Inline block-level elements have the characteristics of block-level elements and inline elements at the same time.