block elements and inline elements in css

"Block-level elements (block)" and "Inline elements (inline)" are one of the basic concepts of CSS layout. Understanding their differences is very important to master layout (Flex/Grid/Flow).

1. Definition and core differences

Comparison items	Block-level elements (Block)	Inline elements (Inline)
Expression	On one line, arranged from top to bottom	Arranged in the same line with other elements
Default Width	Automatically fills the width of the parent container	Spread by content
Width and height can be set	✅ width / height can be set	❌ Generally invalid (some exceptions such as <img>)
Margin/padding can be set	✅ Valid in all directions	⚠️ Only valid left and right (up and down may not be valid)
Typical tags	<div>, <p>, <section>, <header>	<span>, <a>, <em>, <strong>
Line Wrap Features	Automatic line wrapping	No automatic line wrapping
Formatting Features	Arrange by block (Block Formatting Context)	Arrange by text flow (Inline Formatting Context)

2. Example of block-level elements

<div>我是块级元素A</div>
<div>我是块级元素B</div>

✅ Effect:

[我是块级元素A]
[我是块级元素B]

Each <div> is on its own line.

3. Example of inline elements

<span>我</span>
<span>是</span>
<span>行内元素</span>

✅ Effect:

我是行内元素

All <span> will appear side by side on one line.

4. Switchable display types

The CSS display property allows an element to switch between block level and inline:

Attribute value	Description
display: block	Element becomes block level
display: inline	The element becomes inline
display: inline-block	✅ Mixed type: does not occupy an exclusive line, width and height can be set
display: none	Hidden element
display: flex / grid	Change to container type (new layout model)

🔸 Example:

span {
  display: block; /* 让行内元素表现为块级 */
}
div {
  display: inline-block; /* 让块元素并排显示 */
}

5. inline-block: the combination of inline and block

inline-block element:

• Do not occupy a line;
• You can set width and height;
• Commonly used for buttons, labels, menu items, etc.

Example:

<span class="btn">按钮A</span>
<span class="btn">按钮B</span>

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #42b983;
  color: #fff;
  border-radius: 4px;
}

✅ Effect:

Button A Button B (displayed side by side, and the width and height can be set)

6. Differences between block-level and inline box models

Items	Block-level elements	Inline elements
width/height	Valid	Not valid (expanded by content)
margin/padding	Valid for top, bottom, left and right	Not fully valid for top and bottom (affected by font)
line-height	Control the height of the entire line	Control the text spacing
vertical-align	Invalid	✅ Valid (control baseline alignment)

7. Summary of common interview questions

Q1️⃣: What is the difference between block-level elements and inline elements? Block-level elements occupy one line, can set width and height, and have valid upper and lower margins; Inline elements do not wrap, the width and height are determined by the content, and the upper and lower margins are invalid.

Q2️⃣: How to set the width and height of inline elements? Change to display: inline-block or display: block.

Q3️⃣: There are gaps between inline elements. Why? Because HTML spaces are rendered as text spacing, this can be solved by removing the spaces or setting font-size: 0.

Q4️⃣: Why do block-level elements wrap? Because in Normal Flow, block-level boxes are stacked vertically according to the document flow by default.

8. Common block elements and inline elements

块级元素列表
<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>    定义表格中的行    
行内元素列表
<a>    标签可定义锚    
<abbr>    表示一个缩写形式    
<acronym>    定义只取首字母缩写    
<b>    字体加粗    
<bdo>    可覆盖默认的文本方向    
<big>    大号字体加粗    
    换行    
<cite>    引用进行定义    
<code>    定义计算机代码文本    
<dfn>    定义一个定义项目    
<em>    定义为强调的内容    
<i>    斜体文本效果    
<img>    向网页中嵌入一幅图像    
<input>    输入框    
<kbd>    定义键盘文本    
<label>    标签为 input 元素定义标注（标记）    
<q>    定义短的引用    
<samp>    定义样本文本    
<select>    创建单选或多选菜单    
<small>    呈现小号字体效果    
<span>    组合文档中的行内元素    
<strong>    语气更强的强调的内容    
<sub>    定义下标文本    
<sup>    定义上标文本    
<textarea>    多行的文本输入控件    
<tt>    打字机或者等宽的文本效果    
<var>    定义变量    
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button>    按钮    
<del>    定义文档中已被删除的文本    
<iframe>    创建包含另外一个文档的内联框架（即行内框架）    
<ins>    标签定义已经被插入文档中的文本    
<map>    客户端图像映射（即热区）    
<object>    object对象    
<script>    客户端脚本

BFC layout

BFC (Block Formatting Context) is part of the visual CSS rendering of the Web page. It is the area where the layout process of the block box occurs, and it is also the area where floating elements interact with other elements.

1. BFC is an independent layout environment, and the layout of elements inside BFC does not affect each other from the outside;
2. BFC can be triggered by some conditions to achieve layout requirements or solve some problems;
3. You can think of BFC as a tool. There is no need to explore its definition, just focus on understanding its functions (characteristics).

BFC trigger conditions

1. Root element (<html>)
2、float值非none 3、overflow值非visible 4、display值为inline-block、table-cell、table-caption、flex、inline-flex 5、position值为absolute、fixed

Characteristics of BFC

1. The upper and lower margins of two adjacent containers belonging to the same BFC will overlap (key point)
2. When calculating the BFC height, floating elements also participate in the calculation (key point)
3. The BFC area will not overlap with the floating container (key point)
4. The containers in the BFC are arranged vertically in order
5. The margin-left of an element touches the border-left of its containing block.
6. BFC is an independent container. Elements inside the container will not affect elements outside the container.

IFC layout rules

Inline Formatting Contexts, also known as "inline formatting context".

• The child elements are arranged horizontally and horizontally, and the vertical starting point is the top of the element.
• Only horizontal style space will be calculated for child elements. 【 padding、border、margin 】 , the vertical style space will not be calculated, 【 padding、border、margin 】 。
• In the vertical direction, child elements will be aligned in different ways (vertical-align)
• A rectangular area that can completely contain all the boxes on a line is called the line box of the line.The width of the line box is determined by the containing box and the floats within it.
• The "line box" in IFC generally has its left and right sides close to its containing block, but float elements will be arranged first.
• The height of the "line box" in IFC is determined by CSS line height calculation rules. The heights of multiple line boxes under the same IFC may be different.
• When the total width of inline-level boxes is less than the line box containing them, their horizontal rendering rules are determined by the text-align attribute value.
• When an "inline box" exceeds the width of its parent element, it is split into multiple boxes, and these oxes are distributed among multiple "line boxes".If the child element is not forced to wrap, the "inline box" will not be split and will overflow the parent element.

You can also use IFC to do many other things, such as solving vertical centering of elements and inconsistent row heights of multiple text elements.