Fe-interview: [css] 第104天 行内元素和块级元素有什么区别，如何相互转换？

[haizhilin2013]

第104天 行内元素和块级元素有什么区别，如何相互转换？

[quanhuan2011]

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

[nowherebutup]

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

  通过display属性切换

[HuoXiaoYe]

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

| 块级元素 | 行内元素 |
|-------|:---:|
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 对应于display:block | 对应于display:inline； |

[EmiyaYang]

@HuoXiaoYe @quanhuan2011 @nowherebutup

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

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

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

掘金：前端布局基础概述

[HuoXiaoYe]

@EmiyaYang 感谢指正

[quanhuan2011]

@EmiyaYang 感谢指正，学习了。

[EragonBubble]

行内元素

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

块级元素

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

[qp97vi]

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

[1018715564]

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

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

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

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