【HTML】行内元素、块级元素与行内块级元素

Type	display
行内	inline
块级	block
行内块	inline-block

块级元素的前后会产生换行，行内元素不会。

块级元素可以包含行内元素、块级元素，行内元素只能包含文本和其他行内元素。

CSS Attribute	inline	block	inline-block
width	❌	✔️	✔️
height	❌	✔️	✔️
margin	✔️	✔️	✔️
padding	✔️	✔️	✔️
border	✔️	✔️	✔️

常见的display为inline的标签：

span
a
b i u strong em small sup sub
br
code var kbd
q cite
img
label

img标签的行为表现为行内块，不能换行但可以设置宽高。

常见的display为block的标签：

p
h1~h6
ul ol li
div
table tr td
hr
pre

常见的display为inline-block的标签：

button
input
select
textarea

参考资料：

• HTML 块级元素、行内元素和行内块级元素
• CSS中 块级元素、行内元素、行内块元素区别
• <img>：图像嵌入元素