行内元素和块级元素

块级元素（block）特性

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。
  • 宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制。
  • 块级元素的宽度默认会继承父元素的可用宽度（即 width: auto 解析为 100%）。

内联元素（inline）特性

  • 和相邻的内联元素在同一行。
  • width/height 无效。
  • 水平 padding 和 margin 是可以设置的（会影响同行布局），垂直 padding/margin 不可见也不影响行高。

1. 行内元素转换成块级元素的方法

/* 现代浏览器都支持 */
display: block;

/* 生成块级框，可以设置宽高，换行符不解析 */
float: left;    /* 或 right */

/* 生成块级框，可以设置宽高，换行符不解析 */
position: absolute;  /* 或 fixed */

2. 块级元素转换成行内元素的方法

display: inline;

补充：

  • 还有第三种混合状态 display: inline-block，对外保持 inline 同行特性、对内支持 block 设置宽高，但 行内块元素之间会有换行符导致的 4px 左右空白，可通过 font-size:0 或 letter-spacing 消除，详见 css-025、css-067。
  • 转化后是否"继承父元素宽度"取决于具体取值：原生 <div> 默认 100%，但 display: block 本身只改变格式化上下文，不会强制宽度 100%，需要配合 width: 100% 显式声明。