一般通过display属性来区分块级元素和行内元素，block代表块级元素，inline代表行内元素。
块级元素：
1、内容独占一行。
2、width和height可以设置。
3、margin和padding也可以设置。
行内元素：
1、内容不独占一行。
2、width由内容撑开，不可设置。
3、竖直方向marigin和padding不可设置，水平方向可设置。
4、有多个行内元素，则会排列在一行，直到父容器放不下才会换行。
块级元素和行内元素通过修改display属性可相互切换。

• 是否独占一行的区别
• 宽高是否可设置
• 外边距,内边距是否可设置的区别

通过display属性切换

表格的方式对比了一下行内元素与块级元素的区别，希望大家喜欢

@HuoXiaoYe @quanhuan2011 @nowherebutup

发现大家均存在一个误区，能否设置宽高不是行内元素与块级元素的区别。举个例子，<img>可设置宽高但同时也属于行内元素。

行内元素又分为可置换元素与不可置换元素。可置换元素展示的内容是通过元素的src、value等属性或CSS content属性从外部引用得到的，可被替换的，如<img>，<input>, <textarea>等。剩下的就是不可置换元素。

不可置换行内元素不能设置width、height和垂直方向上的margin，而可置换行内元素则可以。

掘金：前端布局基础概述

@EmiyaYang 感谢指正

@EmiyaYang 感谢指正，学习了。

行内元素

默认宽度为内容的宽度，不单独成行。
display: inline;

块级元素

单独成行，默认宽度为父级宽度的100%
display: block;

块级元素独占一行，宽度默认为父级宽度的100%可以设置width、height、padding、margin值
行内元素不单独占一行、默认宽度为内容的宽度

行内元素一般的特点是： 1 元素不会天然换行，多个行内元素会在同一行显示 2. 不可设置宽高，margin，padding等属性 3. 元素的长宽高等是靠内容撑开的
块级元素一般的特点是： 1 元素是天然换行的 2. 可以设置宽高，margin，padding等

可以通过display: block;/ display: inline; 来转换

为什么说是“一般”呢？难道不是绝对么？

比如img就是行内置换元素，属于特殊元素，因此它虽然是行内元素，但是它可以设置宽高等